| 容器 | ||
|---|---|---|
| flex | inline-flex | 将该元素变为 flex 容器。 | |
| row | column | row-reverse | column-reverse | 设置项目排列所沿的主轴。 | |
| flex-start | center | space-between | space-around | space-evenly | 沿主轴分布项目。 | |
| stretch | center | flex-start | flex-end | baseline | 沿交叉轴对齐项目。 | |
| flex-start | center | stretch | space-between | 交叉轴有多余空间时，对齐换行后的各行。 | |
| nowrap | wrap | wrap-reverse | 让项目换到新行，而不是收缩。 | |
| 0.5rem | 8px 16px | 项目之间的间距，水平和垂直方向。 | |
| 项目 | ||
| 0 | 1 | 2 | 项目相对于同级元素吸收多少剩余空间。 | |
| 0 | 1 | 空间不足时项目收缩的程度。 | |
| auto | 200px | 50% | 分配剩余空间之前的起始尺寸。 | |
| 1 | 1 0 auto | 0 0 200px | grow shrink basis 的简写。 | |
| auto | center | flex-start | flex-end | stretch | 为单个项目覆盖容器的 align-items。 | |
| 0 | -1 | 2 | 不改动源码顺序即可重新排列项目。 | |