CSS Flexbox 速查表：屬性與值
Flexbox 在一個維度上（列或欄）排版項目，並在它們之間分配空間。屬性分為兩組：設定在容器（flex 父級）上的，和設定在項目（其子級）上的。
思維模型：flex-direction 設定主軸；justify-content 沿主軸對齊，align-items 沿垂直的交叉軸對齊。
更新 2026-07-06
容器屬性（flex 父級）
| 屬性 | 值 | 作用 |
|---|---|---|
| display | flex | inline-flex | 把元素變成 flex 容器 |
| flex-direction | row | row-reverse | column | column-reverse | 主軸方向 |
| flex-wrap | nowrap | wrap | wrap-reverse | 項目是否換到新行 |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | 沿主軸的對齊 |
| align-items | stretch | flex-start | center | flex-end | baseline | 沿交叉軸的對齊 |
| align-content | flex-start | center | space-between | stretch | 對齊換行後的多列 |
| gap | <length> (e.g. 16px) | 項目之間的間距 |
項目屬性（子級）
| 屬性 | 值 | 作用 |
|---|---|---|
| flex-grow | 0 | <number> | 項目為填滿空間而增長的程度 |
| flex-shrink | 1 | <number> | 空間緊張時項目收縮的程度 |
| flex-basis | auto | <length> | grow/shrink 之前項目的起始尺寸 |
| flex | e.g. 1 1 0 | 1 | auto | grow、shrink、basis 的簡寫 |
| align-self | auto | center | flex-start | flex-end | stretch | 為單個項目覆寫 align-items |
| order | 0 | <integer> | 在視覺上重新排序項目（越小越靠前） |
最常見的置中技巧：在容器上設定 display: flex; justify-content: center; align-items: center;，即可讓子元素水平和垂直都置中。這些值中用到的尺寸單位，見 CSS 單位參考。