熟悉 CSS Grid / Flex
2025年7月1日
為什麼要學 Grid 和 Flex？
- Flex 適合「一維」排版（單一方向：水平或垂直）
- Grid 適合「二維」排版（同時控制行與列）
- 現代 RWD（響應式）網頁設計的主力工具，不再需要使用 float、position 搞定複雜排版
CSS Flexbox 基本概念
- Flex 是容器（container）和項目（items）之間的關係
- 設定 display: flex 就啟用彈性盒子
容器常用屬性（父層）
| 屬性 | 功能 | 常見值 |
|---|---|---|
display | 啟用 Flex | flex |
flex-direction | 主軸方向 | row（預設）, column |
justify-content | 主軸對齊 | flex-start, center, space-between, space-around |
align-items | 交叉軸對齊（「垂直於主軸」的方向上如何對齊） | stretch, center, flex-start, flex-end |
gap | 項目間距 | gap: 1rem |
flex-wrap | 控制當子元素（flex item）超出容器寬度時，是否換行 | nowrap：（預設）不換行，項目會被壓縮或溢出容器。wrap：超出時換到下一行，從上到下排列。wrap-reverse：超出時換行，但從下到上排列。 |
項目常用屬性（子層）
| 屬性 | 功能 |
|---|---|
flex-grow | 放大比例 |
flex-shrink | 縮小比例 |
flex-basis | 初始大小 |
flex | 上三個的縮寫，例如：flex: 1 1 auto |
align-self | 單個項目對齊 |
align-items 與 justify-content 的區別
align-items： 控制 Flex 項目在交叉軸上的對齊justify-content： 控制 Flex 項目在主軸上的對齊
這兩者一起使用，可以實現 Flex 項目在兩個方向上的精確定位
CSS Grid 基本概念
- Grid 是一個明確定義「行」和「列」的系統
- 適合複雜排版（例如卡片、儀表板、表格）
容器常用屬性（父層）
| 屬性 | 功能 | 常見值 |
|---|---|---|
display | 啟用 Grid | grid |
grid-template-columns | 定義欄數 | repeat(3, 1fr) |
grid-template-rows | 定義列數 | 100px auto 1fr |
gap / row-gap / column-gap | 間距 | gap: 1rem |
justify-items / align-items | 項目對齊 | center |
place-items | 合併對齊設定 | center |
項目常用屬性（子層）
| 屬性 | 功能 |
|---|---|
grid-column | 占幾欄 |
grid-row | 占幾行 |
place-self | 單一對齊設定 |
除了排版技巧還想了解一些 javascript 嗎？參考： ES6+ 語法與設計模式