| 类别 | 属性名 | 可选取值 | 作用说明 | 关键注意事项 |
|---|
| Flex 容器属性 | display | flex、inline-flex | 块级弹性容器（独占一行）、行内级弹性容器（同行排列） | 开启 Flex 布局核心，子元素自动成为 Flex 项目；inline-flex 容器宽高由内容决定 |
| flex-direction | row（默认）、row-reverse、column、column-reverse | 控制主轴方向：水平左→右、水平右→左、垂直上→下、垂直下→上 | 主轴方向决定 justify-content/align-items 的作用维度（水平 / 垂直） |
| flex-wrap | nowrap（默认）、wrap、wrap-reverse | 主轴空间不足时：不换行（压缩项目）、换行（新行在下）、反向换行（新行在上） | nowrap 时项目受 min-width/min-height 限制；wrap 后生成多弹性行，需配合 align-content 控制行间距 |
| flex-flow | [flex-direction] [flex-wrap]（默认 row nowrap） | 复合属性：合并设置主轴方向 + 换行规则 | 示例：flex-flow: column wrap（垂直方向 + 换行），简化代码书写 |
| justify-content | flex-start（默认）、flex-end、center、space-between、space-around、space-evenly、start、end、left、right | 主轴对齐方式：贴起点、贴终点、居中、首尾贴边均匀分布、两侧留白均匀分布、完全均匀分布、适配书写模式对齐 | 主轴为 row 时控制水平对齐，column 时控制垂直对齐；space-evenly 兼容现代浏览器，left/right 仅水平主轴生效 |
| align-items | stretch（默认）、flex-start、flex-end、center、baseline、first baseline、last baseline | 交叉轴单行对齐：拉伸填满、贴起点、贴终点、居中、基线对齐、首 / 尾基线对齐 | 项目未设 height/min-height 时 stretch 生效；baseline 按文字第一行基线对齐，无视项目高度 |
| align-content | stretch（默认）、flex-start、flex-end、center、space-between、space-around、space-evenly、start、end | 交叉轴多行对齐（仅换行时生效）：拉伸填满、贴起点、贴终点、居中、均匀分布等 | 单行项目时无效；控制弹性行之间的间距，与 align-items（控制项目对齐）区分开 |
| gap | [length]（如 10px）、[row-gap] [column-gap]（如 10px 20px） | 项目间距：统一设置水平 + 垂直间距，或分别设置行 / 列间距 | 仅作用于项目之间，不影响项目与容器间距；替代 margin 更简洁，避免外层留白问题 |
| row-gap/column-gap | [length]（如 20px/10px） | 单独设置项目水平间距（列）、垂直间距（行） | 优先级低于 gap 复合属性；row-gap 控制行与行间距，column-gap 控制列与列间距 |
| align-tracks/justify-tracks | stretch、flex-start、flex-end、center 等 | 控制网格轨道对齐（Flex-Grid 混合场景） | Flex 布局中极少使用，主要用于兼容 Grid 布局的轨道控制需求 |
| Flex 项目属性 | flex-grow | number（默认 0，非负） | 主轴剩余空间分配比例：数值越大，占比越多 | 默认为不扩展；多个项目按比例分配（如 1:2:3 则占比 1/6:2/6:3/6）；取值不能为负数 |
| flex-shrink | number（默认 1，非负） | 主轴空间不足时收缩比例：数值越大，收缩越多 | 默认为允许收缩；0 时项目不收缩（优先保证自身尺寸）；取值不能为负数，需结合 flex-basis 生效 |
| flex-basis | auto（默认）、[length]（如 150px）、[percentage]（如 30%）、content | 项目主轴初始尺寸：默认取自身宽高、固定尺寸、容器占比、内容自适应 | 优先级：flex-basis > 项目 width/height；content 兼容性稍差（IE 不支持） |
| flex | none（0 0 auto）、auto（1 1 auto）、[flex-grow]（[grow] 1 0）、[flex-grow] [flex-shrink]（[grow] [shrink] 0）、[flex-grow] [flex-shrink] [flex-basis] | 复合属性：合并设置扩展、收缩、基准尺寸 | 推荐完整写法（如 flex: 1 0 200px）；flex: 1 为最常用自适应写法（平均分配空间）；flex: none 用于固定尺寸项目 |
| align-self | auto（默认）、stretch、flex-start、flex-end、center、baseline、first baseline、last baseline | 单个项目交叉轴对齐：覆盖父容器 align-items 属性 | 仅作用于当前项目；示例：某项目需 “垂直居下”，其他项目 “居中” 时使用 |
| order | integer（默认 0，可正负） | 项目视觉排序：数值越小，排列越靠前 | 不修改 DOM 结构，仅视觉调整；负数可排在默认项目之前（如 order: -1）；注意无障碍访问（屏幕阅读器按 DOM 顺序读取） |
| margin | auto、常规取值（如 10px） | 自动填充剩余空间（auto），或设置普通外边距 | margin: 0 auto 实现单个项目主轴居中；margin: auto 0 实现单个项目交叉轴居中；常规取值与普通 CSS margin 一致，影响项目间距 |
