使用 calc() 與 border-box 建立 RWD Column
若要建立可 RWD 的 Layout,也可藉由 calc() 與 border-box 先建立 Column,最後再將 Item 放進 Column 內。
若要建立可 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 實現。
若要在 Flexbox 內實現 Cross Axis 置中,直覺會使用 align-items: center,事實上也可巧妙地使用 margin: auto 實現。
Flexbox 為 CSS 3 所引進的新 Layout,使得我們不必再使用 inline-block 或 float 排版,而改用更直覺的 Flexbox。