使用 text-transform 將 String 字首變大寫
傳統若要將 String 字首變大寫,直覺會使用 JavaScript,事實上使用 CSS 即可。
傳統若要將 String 字首變大寫,直覺會使用 JavaScript,事實上使用 CSS 即可。
使用 calc() 與 Media Query,我們可根據 iPhone、iPad、iPad Pro、MacBook Air 與 iMac 分別設定不同 Column Width。
若要建立可 RWD 的 Layout,也可藉由 calc() 與 border-box 先建立 Column,最後再將 Item 放進 Column 內。
為了實現 RWD,我們會將 width 與 margin 都改用 % 而非 px,但這會造成 margin 隨 Browser 寬度改變,若要 margin 固定而 width 依舊使用 %,則要借數 calc() 根據固定 margin 動態計算 width。
若不換行,justify-content: space-around 可使 Item 之間間隔相等,但若搭配 flex-wrap: wrap 換行,如果 Item 個數無法整除,會出現間隔不相等,可使用 calc() 自行處理間隔。
Flexbox 的 justify-content: space-around,事實上也能使用 margin: auto 簡單實現。
一般使用 Flexbox 都只會使用其相關 Property,事實上搭配 margin: auto 可實現各種不規則 Layout。
實務上常遇到一堆 Item 都靠左,但最後一個 Item 靠右,這種常見需求可使用 flex-grow 或 margin: auto 達成。
實務上常遇到一堆 Item 都靠左,但最後一個 Item 靠右,直覺會使用 flex-grow,事實上也可巧妙地使用 margin: auto 實現。
若要同時水平置中與垂直置中,直覺會同時使用 justify-conten: center 與 align-items: center,事實上也可巧妙地使用 margin: auto 實現。