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