Flexbox 與 Grid 怎麼選
現代 CSS 佈局幾乎就是這兩套。Flexbox 擅長一條軸（one dimension）上的分配與對齊；Grid 擅長同時管行與列（two dimensions）。同一個頁面常常外層 Grid、元件內 Flex。
Flexbox 適合什麼
- 導覽列、工具列、標籤列
- 一顆按鈕裡的圖示 + 文字
- 卡片底部把價格推到右邊
- 不明確知道會有幾個子項目、希望自動擠或換行
.site-header {
display: flex;
align-items: center;
gap: 1rem;
}
.site-header nav {
margin-inline-start: auto;
display: flex;
gap: 1rem;
}
詳見 Flex。
Grid 適合什麼
- 整頁骨架（頁首、側欄、主欄、頁尾）
- 等寬卡片牆、相簿
- 表單標籤與欄位對齊
- 某個區塊要跨欄 / 跨列
.page {
display: grid;
grid-template-columns: 16rem 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
}
詳見 Grid。
對照
| Flexbox | Grid | |
|---|---|---|
| 維度 | 一維（主軸 + 交叉軸） | 二維（行 × 列） |
| 內容 vs 格子 | 內容驅動：先有 item 再分配 | 格子驅動：先畫軌道再放 item |
| 間距 | gap |
gap |
| 對齊 | justify-content、align-items |
另有 justify-items、align-content |
| 重疊 | 較不直覺 | 可讓兩個 item 佔同一格 |
可以一起用
頁面用 Grid 切欄，欄內導覽用 Flex。不必選邊站。
總結
- 「排成一列或一欄，並處理多餘空間」→ Flex
- 「先規定幾列幾欄，再把磚塊放進去」→ Grid
- 舊的 float 多欄可以退休了