flex-wrap: wrap 是启用多行 flex 布局的唯一开关，默认 nowrap 会强制单行溢出；设为 wrap 后才按需换行并保持行内对齐，但需父容器有明确宽度且子项可收缩，否则仍不换行。
flex-wrap: wrap 是多行 Flex 布局的唯一开关
不设 flex-wrap，子项死活不会换行——哪怕容器明显窄于所有子项总宽。默认值是 nowrap，它强制所有子项挤在一行，溢出就溢出，不报警也不折行。
设成 wrap 才真正启用“按需换行”逻辑：当一行放不下下一个子项时，自动折到下一行，并保持每行内部仍按 justify-content 对齐。
-
flex-wrap: wrap-reverse会把换行方向翻转（新行插在旧行上方），但实际用得极少，多数人设错后发现布局全乱了才回头查 - 注意：只靠
flex-wrap不够，还得确保父容器有明确宽度（比如width: 300px或max-width），否则它可能撑满整个视口，永远不触发换行 - IE10–IE11 需要加
-ms-flex-wrap: wrap前缀，但仅当项目必须兼容这些老版本时才加；现代项目可忽略
子项不换行？先看 flex-basis 和 flex-shrink 是否锁死了宽度
即使 flex-wrap: wrap 已生效，子项仍可能“假装没看见换行”，本质是它们被算出来宽度太大、不肯缩小，导致每行只能塞一个。
典型表现：三列卡片在小屏上变成一列一卡，而不是两列或三列自适应。
- 检查子项是否写了
flex: 0 0 auto或flex: 0 0 100%—— 这会让它拒绝收缩，哪怕空间不够也硬占满 - 更稳妥的写法是
flex: 1 1 200px：允许拉伸也允许收缩，基准宽度设为合理最小值（如卡片常用200px） - 如果用了
min-width（比如min-width: 250px），它会覆盖flex-basis，成为换行的实际门槛——这点常被忽略
gap 在多行 Flex 中的行为和兼容性陷阱
gap 能干净地控制行内和行间间距，但它在多行 Flex 下有个关键限制：只作用于 Flex 容器内部，不延伸到容器边缘。
也就是说，第一行顶部、最后一行底部、最左列左侧、最右列右侧，都没有 gap 的留白——这和 CSS Grid 的 gap 行为一致，但新手常误以为它会自动加外边距。
- Chrome 84+、Firefox 63+、Safari 14.1+ 原生支持
gap；旧版 Safari（margin 模拟，且要注意最后一行子项的margin-right容易溢出 - 别对
gap抱过高性能期待：它不会引发重排，但大量子项 + 大 gap 值可能轻微影响渲染帧率（实测超 500 项才明显） - 若同时用
align-items: stretch，gap不会影响子项高度计算，只负责间隔——这点比手动margin更可控
flex-wrap 多行时 justify-content 对每行独立生效
justify-content 在多行 Flex 中不是“整体居中”，而是“每行各自居中”。这意味着：如果某行只有 1 个子项，它会单独居中；另一行有 3 个，它们仨再一起居中。
这种行为常被误读为“对齐失效”，尤其当子项数量不均时，视觉上显得松散或错位。
- 想让所有子项严格网格对齐，不要依赖
justify-content，改用display: grid或固定列数的flex（如每行强制 3 个，用伪元素补空） -
justify-content: space-between在多行下可能导致首尾行间距异常大——因为每行两端对齐，中间无子项的“空行”不会出现，但视觉节奏会被打乱 - 如果需要首行左对齐、其余行居中，CSS 本身不支持按行设置，得靠 JS 动态加类，或改用
text-align+ 内联块模拟
多行 Flex 看似简单，但 flex-wrap 只是入口，真正卡住人的永远是子项的收缩意愿、宽度基准、以及对“每行独立对齐”这个隐含规则的忽视。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
