Flex多行布局需同时设置flex-wrap:wrap、justify-content（控制单行内对齐）和align-content（控制多行在交叉轴的分布），且容器须有明确宽高限制；仅设wrap或仅调justify-content均无法实现预期换行与对齐效果。
Flex 布局实现多行换行与对齐，核心在于正确组合 flex-wrap、justify-content 和 align-content 三个属性，而不是只靠 wrap 单独起作用。
必须显式设置 flex-wrap: wrap
默认是 nowrap，子项死锁在单行，再宽的容器或再多的内容都不会换行。只有设为 wrap（或 wrap-reverse）才真正启用换行逻辑：
- 主轴为
row（默认）时：空间不足 → 新行从上到下堆叠 - 主轴为
column时：高度不足 → 新列从左到右排列（即“换列”） - 务必确保容器有明确宽度（如
width: 500px）或最大宽度限制，否则换行可能失效
换行后每行内部的对齐用 justify-content
这个属性控制的是“单行内项目”在主轴上的分布，和是否多行无关：
-
justify-content: flex-start→ 每行左对齐（row）或顶对齐（column） -
justify-content: center→ 每行居中（该行内容整体居中，不是每个 item 居中） -
justify-content: space-between→ 首尾贴边，中间等距
多行整体在交叉轴上的位置由 align-content 决定
这是最容易被忽略的关键点——align-content 管的是“行与行之间”的排布，仅在多行且容器在交叉轴方向有剩余空间时生效：
-
align-content: flex-start→ 所有行贴顶部（row 主轴）或贴左侧（column 主轴） -
align-content: center→ 多行整体在交叉轴居中 -
align-content: stretch（默认）→ 行高拉满容器交叉轴尺寸（需注意子项没设align-self: auto才会生效） - 若只有一行，
align-content无效，此时起作用的是align-items
常见错误与避坑提醒
很多布局出问题，不是代码写错，而是理解偏差：
- 想让多列标签左对齐，只设
justify-content: flex-start不够——必须配合flex-direction: column+flex-wrap: wrap+align-content: flex-start+ 容器固定width - 写了
white-space: normal或word-break: break-word但不换行？因为父容器仍是nowrap，根本没给换行机会 - 动态添加子项后布局错乱？检查是否遗漏
flex-wrap: wrap，nowrap下新项硬塞进当前行，极易溢出
