深入探討 width 與 max-width
對 Element 設定 width 很直覺，但 RWD 出現後，width 就面臨的重大挑戰，因此出現了 max-width，但這兩者有什麼差異呢 ?
タグ : CSS
使用 Fixed Position 實現 Layout
藉由 Fixed Position 與 top、bottom、left 、right 與 margin: auto 靈活運用，可以排出很多特殊 Layout。
使用 flex 一次設定 grow、shrink 與 basis
雖然 flex-grow、flex-shrink 與 flex-basis 為 3 個獨立 property，但實務上常使用 flex 一次設定。
使用 flex-basis 設定 Main Axis 子層 Item 寬度
傳統會使用 width 與 height 設定子層 Item 寬度，但 Flexbox 另外提出了 flex-basis 設定 Main Axis 的子層寬度。
使用 aspect-ratio 設定長寬比例
若想設定 Element 的長寬比，無論 Width 怎麼改變，Browser 會自動根據 Width 計算出 Height，可使用 Chrome 88 新支援的 aspect-ratio。
使用 align-self 針對特定 Item 在 Cross Axis 對齊
align-items 是在父層 Box 設定，會影響所有子層 Item，若想只設定特定子層 Item 的 align-items 設定，或者在某子層 Item 覆蓋父層 Box 的 align-items 設定，則可使用 align-self。
使用 align-content 在 Cross Axis 均分
若希望 Browser 能自動均分父層 Box 在 Cross Axis 剩餘高度，可使用 align-content 的 space 系列設定。
使用 align-content 在 Cross Axis 對齊
在 Cross Axis 處理對齊除了 align-items 外，尚有 align-content，兩者非常接近，唯 align-items 是處理 Item 對於 Flex Line，而 align-content 是處理 Flex Line 對於 Box。
使用 align-content center 垂直置中
除了能使用 align-items: center 垂直置中外，事實上也能使用 flex-wrap: wrap 搭配 align-content: center 垂直置中。
深入探討 align-items stretch
Flexbox 的 align-items 預設為 stretch，這也使得 Flexbox 可自動 stretch 子層 item 使其等高。
使用 inline-flex 使父層成為 Inline
display: flex 與 display: inline-flex 對其子層 Item 都能使用 Flexbox，但對父層 Box 本身處理則不同，flex 會維持 Block，而 inline-flex 會成為 Inline。
align-items 與 align-content 比較
Flexbox 的 align-items 與 align-content 非常類似，都是在處理 Cross Axis 對齊，事實上兩者並不違背，還可一起使用。
在自動換列內使用 Margin Auto
若 Box 有設定 Height，此時 Flex Line 由 Box Height 決定，可使用 margin: auto 動態調整 Margin。
使用 align-items 在沒有換列下處理 Cross Axis 對齊
justify-content 可決定 Main Axis 對齊，若想控制 Cross Axis 對齊，則可使用 align-items。
使用 flex-direction 設定 Main Axis
Flexbox 雖然看起來使 Block 從垂直排列變成水平排列，事實上是由 flex-direction Property 決定 Main Axis 排列方向。
自動依寬度為 String 加上 ...
由 API 所回傳的資料可能過長而換行顯示，但有時我們不希望換行影響版面，而想直接在該行截斷 String 加上 ... 即可，當然可以使用 JavaScript 處理，但隨著 RWD 寬度改變，JavaScript 將面臨挑戰，比較好的方式是使用 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。