Flex布局换行与对齐由四个容器属性控制：flex-wrap决定是否换行（nowrap/wrap/wrap-reverse），justify-content控制主轴对齐，align-items处理单行交叉轴对齐，align-content专管多行时行间对齐。
Flex 布局中控制换行与对齐，关键靠四个容器级属性：flex-wrap 控制是否及如何换行，justify-content 和 align-items 处理单行对齐，align-content 专门管多行时的行间对齐。
用 flex-wrap 决定要不要换行
它只作用于容器，有三个值：
- nowrap（默认）：所有项目强行挤在一行（或一列），超宽会溢出或压缩，不会自动折行
- wrap：空间不够时自动换行，新行/新列按主轴方向顺延（比如 row 下新行在下，column 下新列在右）
- wrap-reverse：换行方向反过来（row 下新行在上，column 下新列在左）
⚠️ 注意：align-content 只在 flex-wrap 是 wrap 或 wrap-reverse 时才生效；设成 nowrap，align-content 就不起作用。
主轴对齐用 justify-content
主轴方向由 flex-direction 决定（默认是 row，即水平向右）。这个属性决定项目在主轴上的位置：
- flex-start：默认，靠主轴起点（左或上）
- flex-end：靠主轴终点（右或下）
- center：居中
- space-between：首尾贴边，中间等距
- space-around：每个项目两侧留等距空白
例如容器设了 flex-direction: column，justify-content 就控制的是垂直方向（上下）的对齐。
交叉轴对齐分两种情况
交叉轴永远垂直于主轴。对齐方式取决于是否有多行：
- 单行时用 align-items：比如 flex-direction: row + align-items: center → 所有项目在垂直方向居中
- 多行时用 align-content：它控制的是“行整体”在交叉轴上的位置。例如 flex-direction: column + flex-wrap: wrap + align-content: flex-start → 所有列从左开始依次排列，不靠右漂移
常见误区：想让多列左对齐，只设 justify-content 没用，必须配合 align-content: flex-start，且确保容器有明确 width 和 flex-wrap: wrap。
实用组合示例：多列左对齐布局
比如座位列表、标签云这类需要垂直堆叠、自动分列、严格左对齐的场景：
- 设容器 display: flex 和 flex-direction: column
- 加 flex-wrap: wrap，并给容器固定 width（如 500px）和 height（如 100px）
- justify-content: flex-start（主轴是垂直，所以控上下对齐）
- align-content: flex-start（交叉轴是水平，所以控列整体左对齐）
- 搭配 gap: 10px 控制列间距，更清爽
这样无论子项是 4 个还是 12 个，新增列都会从左侧依次生成，不会出现右偏或错位。
