CSS Flexbox 参考表Flexbox（Flexible Box Layout Module）是 CSS3 引入的

CSS Flexbox 参考表

属性	可选值	默认值	说明
`display`	`flex` `inline-flex`	—	定义块级或行内级 flex 容器
`flex-direction`	`row` `row-reverse` `column` `column-reverse`	`row`	主轴方向：水平左→右 / 水平右→左 / 垂直上→下 / 垂直下→上
`flex-wrap`	`nowrap` `wrap` `wrap-reverse`	`nowrap`	是否换行：不换行（压缩） / 换行（第一行在上） / 换行（第一行在下）
`flex-flow`	`<flex-direction> <flex-wrap>`	`row nowrap`	上述两个属性的简写，例：`column wrap`
`justify-content`	`flex-start` `flex-end` `center` `space-between` `space-around` `space-evenly`	`flex-start`	主轴对齐：起点 / 终点 / 居中 / 两端等距 / 项目两侧等距 / 完全等距
`align-items`	`stretch` `flex-start` `flex-end` `center` `baseline`	`stretch`	单行交叉轴对齐：拉伸填满 / 起点 / 终点 / 居中 / 文字基线对齐
`align-content`	`stretch` `flex-start` `flex-end` `center` `space-between` `space-around`	`stretch`	多行交叉轴对齐（需 `flex-wrap: wrap` 且容器有额外高度）
`gap` `row-gap` `column-gap`	长度值（如 `20px`、`1rem`）	`0`	项目之间的间距。`gap` 同时设置行/列间距；`row-gap` 行间距；`column-gap` 列间距

属性	可选值	默认值	说明
`order`	整数（可负）	`0`	排列顺序，数值越小越靠前
`flex-grow`	非负数	`0`	放大比例：剩余空间分配权重。`0` 表示不放大
`flex-shrink`	非负数	`1`	缩小比例：空间不足时的缩小权重。`0` 表示禁止缩小
`flex-basis`	长度（`200px`）百分比（`30%`） `auto` `0%`	`auto`	分配剩余空间前的初始主轴尺寸。`auto` 参考自身宽高；`0%` 忽略内容宽度
`flex`	简写：`<flex-grow> <flex-shrink> <flex-basis>`	`0 1 auto`	常用快捷值见下表
`align-self`	`auto`（继承容器） `stretch` `flex-start` `flex-end` `center` `baseline`	`auto`	覆盖容器的 `align-items`，单独定义该项目在交叉轴上的对齐方式

应用场景	使用的属性	常见值
主轴对齐（单行/多行整体）	`justify-content`	`center`、`space-between`、`flex-end`
交叉轴对齐（单行）	`align-items`	`center`、`stretch`、`flex-start`
交叉轴对齐（多行整体）	`align-content`	`center`、`space-between`、`stretch`
单个项目覆盖交叉轴对齐	`align-self`	`center`、`flex-end`、`stretch`