flex-wrap: wrap 是触发换行的唯一开关；仅设 display: flex 不会换行，因默认 flex-wrap: nowrap，必须显式声明 wrap 或 wrap-reverse 才启动换行逻辑。
flex-wrap: wrap 是唯一能触发换行的声明，只写 display: flex 不会换行，哪怕容器再窄、子项再多。
为什么加了 display: flex 还是不换行
因为 flex-wrap 默认值是 nowrap，不是 wrap。浏览器按规范“死扛着不折行”，哪怕总宽度超容器两倍，它也优先压缩子项（如果允许收缩）或溢出，而不是换行。
- 必须显式写
flex-wrap: wrap或flex-wrap: wrap-reverse，换行逻辑才启动 - 常见误操作：只调
flex-direction、狂改flex-basis、加width: 100%，结果全无效 - 检查控制台 computed 样式里
flex-wrap是否真为wrap，别被 CSS 层叠覆盖掉
flex-wrap: wrap 生效但换行错乱的典型原因
开了 wrap 却还是横向溢出或换行点诡异，往往不是 flex-wrap 本身的问题，而是子项尺寸失控：
- 某个子项设了
flex-shrink: 0或min-width: max-content，它卡住整行，后面项目被迫挤出去 - 图片没加
max-width: 100%，原始尺寸远超容器，直接撑爆 - 文字类内容没限制，比如长 URL 或无空格字符串，需配合
word-break: break-all或overflow-wrap: break-word - 移动端 Safari 中，父容器用了
display: inline-flex或min-width: fit-content，会导致宽度计算异常
flex-basis 和 width 谁决定换行位置
flex-basis 比 width 更早参与主轴空间分配，它才是换行前“预估占位”的依据：
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: 200px→ 该项目默认争取 200px 宽，哪怕容器只剩 180px，它也不缩，直接触发换行（前提是其他项目能腾出空间） -
flex-basis: auto→ 回退到width值；flex-basis: 0→ 忽略width，从零开始分剩余空间 - 用百分比时注意：
flex-basis: 50%在父容器width未定义（如仅设height: 100vh）时可能算成 0
移动端和旧浏览器兼容性要点
flex-wrap: wrap 在 IE10+、Chrome、Firefox、Safari（含 iOS）中支持良好，但仍有细节差异：
- IE9 及以下不支持 Flexbox，需降级：用
display: block+float: left+ 清除浮动，或 JS 动态检测后插入<br> - iOS Safari 有时对
gap或transform: scale()敏感，导致换行判断失准；可加一层包裹并设width: 100%隔离干扰 - 表单控件（如
<input>）自带浏览器默认min-width，各平台不一致，建议对可疑子项强制flex-shrink: 1
换行本身一行代码就能开，真正麻烦的是 flex 项目尺寸来源太杂——flex-basis、min-width、内容自然宽、字体渲染、甚至父容器的 zoom 都可能悄悄影响换行点。
