flex-wrap: wrap 是 Flex 布局换行的唯一开关，必须显式声明；配合父容器明确宽度、子项可收缩（如 min-width: 0）及合理 flex-basis 才能可靠换行。
flex-wrap 是 Flex 布局中控制换行的“总开关”，不显式设置它，子元素再挤也死扛着不换行——哪怕容器只有 200px 宽，塞进十个卡片也会强行压缩或溢出。
必须设 flex-wrap: wrap 才会真正换行
Flex 容器默认 flex-wrap: nowrap，这是关键前提。很多人写了 display: flex 就以为能自动折行，结果布局卡死、文字被截断、出现横向滚动条，根源就在这里。
- 只写
display: flex→ 子项永远单行，内容超宽时要么缩小到看不见，要么溢出容器 - 必须加
flex-wrap: wrap→ 空间不够时，新子项才会另起一行（或一列） -
flex-wrap: wrap-reverse会让新行从上往下堆变成从下往上堆，视觉上像倒序排列，但不改变单行内顺序
换行生效的三个必要条件
光写 flex-wrap: wrap 不够，还得满足以下三点，否则浏览器仍可能“假装换行”或完全不响应：
-
父容器有明确宽度：比如
width: 600px或max-width: 100%；若设为width: auto且无约束，容器会无限撑宽，子项永远“够得着” -
子项不能拒绝收缩：如果子项设置了
flex-shrink: 0且总宽度超限，浏览器宁可溢出也不换行；建议加min-width: 0或设flex-shrink: 1 -
子项宽度要可预期：避免全靠内容撑开（如
flex: 0 0 auto），应设flex-basis（如flex: 0 0 200px）或统一用width+flex-shrink: 1
换行后多行之间的对齐靠 align-content
justify-content 只管**每行内部**的分布（比如每行两端对齐），而行与行之间的垂直间距和对齐方式，由 align-content 控制：
立即学习“前端免费学习笔记（深入）”；
-
align-content: flex-start→ 所有行贴在顶部 -
align-content: center→ 多行整体居中（上下留白均等） -
align-content: space-between→ 首尾行贴上下边缘，中间行等距分布 - 注意：
align-items仍是管单行内子项在交叉轴上的对齐（如每行里的卡片垂直居中）
和 flex-direction 搭配时，“换行”方向会旋转
flex-wrap 的行为始终围绕主轴展开。主轴变了，换行方向就变：
-
flex-direction: row+flex-wrap: wrap→ 新行出现在上一行下方（常规水平流） -
flex-direction: column+flex-wrap: wrap→ 实际是“换列”：高度不够时，新项向右排，不是向下延伸 - 想实现“高度不足就向下堆满再右移”？这不是 Flex 的设计目标，该考虑 Grid 布局了
