flex-wrap: wrap 是换行的唯一开关，必须显式设置才能触发换行；默认 nowrap 会强制单行溢出，即使子项总宽远超容器；仅设 flex-basis 或 width 不足以触发换行，还需配合子项可收缩及父容器明确宽度。
flex-wrap: wrap 是换行的唯一开关
Flex 容器默认不换行，哪怕子项总宽度远超容器。必须显式设置 flex-wrap 才能触发换行行为，仅靠 flex-basis 或 width 无法触发。
常见错误是只设 flex: 1 或 min-width，却忘了加 flex-wrap: wrap，结果所有子项被强行压缩或溢出容器。
-
flex-wrap: nowrap（默认）：强制单行，子项可能溢出或缩小到极窄 -
flex-wrap: wrap：换行，新行从主轴起点开始（如 left-to-right 布局下，新行在上一行下方） -
flex-wrap: wrap-reverse：换行但新行在上一行上方，常用于倒序布局
子项尺寸如何影响换行时机
换行不是“内容满了就断”，而是由每个子项的**弹性基础尺寸 + 主轴剩余空间**共同决定。浏览器会逐个尝试将子项放入当前行，直到下一个子项放不下时才折到下一行。
关键控制点有三个：
-
flex-basis：决定子项初始占用主轴空间，设为auto（默认）时取自身宽高；设为具体值（如200px）则以此为换行参考基准 -
min-width/min-height：防止子项被flex-shrink压缩到无法识别，间接影响换行位置 -
flex-shrink: 0：禁止收缩，让子项坚持自己尺寸，更容易触发换行
示例：flex: 0 0 240px 比 flex: 1 更可控——前者明确告诉浏览器“我至少要 240px，不够就换行”，后者可能被无限压缩而不换行。
换行后对齐方式怎么选
换行后，多行之间的垂直对齐（交叉轴）由 align-content 控制，它和单行时的 align-items 完全不同，且只在有多行时生效。
-
align-content: stretch（默认）：各行撑满交叉轴，行间距为 0 -
align-content: center：多行整体居中，上下留白均分 -
align-content: flex-start：所有行贴顶部（或起始端），后续行紧贴前一行 - 注意：
align-content对单行无效，此时应改用align-items
容易踩坑的是误用 justify-content 来调多行对齐——它只管**每行内部**的主轴分布，不管行与行之间怎么排。
响应式换行经常失效的根源
媒体查询里只改 flex-direction 或 width 不够，flex-wrap 必须显式重置。尤其在移动端从 column 切回 row 时，若没写 flex-wrap: wrap，即使容器变宽，子项仍可能卡成一列。
另一个隐蔽问题是子项内联元素（如 <span></span>）或文本未处理换行策略，导致视觉上“没换行”，实际是文本溢出而非 Flex 换行失效。
- 检查是否遗漏
flex-wrap的媒体查询覆盖 - 确认子项没有
white-space: nowrap阻止内部文本折行 - 避免对子项设固定
height同时又期望它随内容撑开换行
换行逻辑本质是“尺寸试探 + 行生成”，不是流式布局那种自然断行，所以每一步尺寸声明都要有明确意图，含糊的 flex: 1 在复杂场景下最容易失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
