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 单位参考。