弹性盒子多行换行不生效，通常因未显式设置flex-wrap: wrap、子项尺寸固定无法收缩或父容器宽度不足/溢出隐藏所致；需检查flex-wrap属性、子项flex-shrink与min-width、父容器width及overflow设置，并注意flex-direction为column时换行逻辑不同。
弹性盒子多行换行不生效，通常不是 flex-wrap 写错了，而是被其他样式或容器限制“悄悄抵消”了。核心问题往往出在：父容器宽度不够、子项不收缩、或 flex-direction 与换行逻辑冲突。
确认 flex-wrap 属性已正确设置
flex-wrap 必须显式设为 wrap 或 wrap-reverse，默认值是 nowrap —— 这是最常见的遗漏点。
- ✅ 正确写法：
display: flex; flex-wrap: wrap; - ❌ 错误写法：只写
display: flex;（此时等同于flex-wrap: nowrap） - 注意：不要和
flex-flow混淆，它只是flex-direction和flex-wrap的简写，漏写任一都可能出问题
检查子元素是否“撑不开”导致无法换行
即使设置了 wrap，如果所有子项加起来仍能挤进一行（比如内容过短、或子项设置了 flex-shrink: 0 + 固定宽高），浏览器就不会触发换行。
- 给子项加
min-width: 0或flex-basis: auto，避免因内容过长或图片/文本溢出而卡住换行 - 慎用
white-space: nowrap，它会让文本拒绝折行，间接阻止整行“让位”换行 - 若子项含图片，记得加
max-width: 100%，否则图片可能强行撑宽容器
留意父容器宽度和溢出限制
如果父容器 width 太小、或设置了 overflow: hidden / overflow: scroll，视觉上可能看不到第二行，甚至浏览器因计算误差放弃换行。
立即学习“前端免费学习笔记（深入）”；
- 临时加
outline: 1px solid red查看父容器真实尺寸 - 移除
overflow: hidden测试是否换行突然出现（说明是裁剪掩盖了第二行） - 确保父容器有明确的宽度上下文（如非
fit-content或未设宽的 inline 元素）
避免 flex-direction 与换行方向理解错位
flex-wrap: wrap 是按主轴方向换行的。如果主轴是列（flex-direction: column），那换行其实是“换列”，表现为纵向堆叠+横向扩展——这容易让人误以为没生效。
- 多行布局一般配合
flex-direction: row（默认）使用 - 想实现“竖排多列”，应保持
row+wrap，再用align-content: flex-start控制行间距 - 别把
flex-direction: column和换行混用，除非你真需要列主轴下的“新列”行为
不复杂但容易忽略。重点盯住三处：是否写了 flex-wrap: wrap、子项有没有被固定尺寸锁死、父容器有没有偷偷裁掉第二行。
