flex-wrap: wrap 是换行的唯一开关，不设置则子项强制单行溢出；必须显式声明，且需父容器有明确宽度、子项可收缩（如min-width: 0），三者缺一不可。
flex-wrap: wrap 是唯一开关，不设就不换行
Flex 容器默认死守 flex-wrap: nowrap，哪怕子项总宽远超容器，也只会压缩或溢出，绝不会折行。必须显式写上 flex-wrap: wrap 才激活换行逻辑——它不是“辅助选项”，而是换行的硬性前提。
常见错误现象：display: flex 写了，justify-content 也调了，但子项就是不换行。十有八九漏了这行。
- IE10–IE11 需补
-ms-flex-wrap: wrap，现代项目可跳过 -
flex-wrap: wrap-reverse会让新行插在旧行上方，容易导致视觉错乱，调试时注意检查是否误设
父容器没宽度，换行就失效
即使 flex-wrap: wrap 已启用，若父容器没有明确宽度（比如没设 width、max-width 或被内容撑开），浏览器就无法判断“何时空间不足”，自然不会触发换行。
典型场景：容器用 width: 100% 但父级是 display: inline 或未设宽；或者容器是 position: absolute 且没给 left/right 限定范围。
- 推荐做法：直接设
width或max-width，例如max-width: 1200px - 响应式场景下，用
min-width+width: 100%组合更稳妥
子项不肯收缩，换行就卡住
换行失败的第二大原因：子项被锁死了宽度。即使容器够窄，它们也不愿缩小，结果每行只能塞一个，看起来像“不换行”，其实是“换不了”。
关键看子项的 flex 值或 flex-basis：
-
flex: 0 0 auto或flex: 0 0 100%→ 拒绝收缩，极易导致单列堆叠 -
min-width: 250px→ 会覆盖flex-basis，成为实际换行阈值，常被忽略 - 推荐写法：
flex: 1 1 200px（允许拉伸+收缩，基准宽设合理最小值）
gap 在多行 Flex 中只管内部，不管边缘
gap 确实能统一控制行列间距，但它只作用于子项之间，**不会给容器四边自动加留白**。第一行顶部、最后一行底部、最左列左侧、最右列右侧，都没有 gap。
新手常误以为 gap: 16px 等价于给所有子项加 margin，结果发现边缘紧贴容器边界，布局显得拥挤。
- 如需边缘留白，得额外加
padding到父容器 - Safari 14.1 以下不支持
gap，需用margin模拟，但要注意最后一行子项的margin-right可能溢出
flex-wrap: wrap 显式开启、子项具备收缩能力。少一个，换行就不可靠——尤其是 min-width 和 flex-shrink: 0 这类隐性限制，最容易在上线后才暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
