flex-wrap: wrap 是换行的唯一开关，必须显式设置，因默认 nowrap 会强制子项单行溢出；需配合父容器明确宽度、子项可收缩、合理对齐及兼容性处理，缺一不可。
flex-wrap: wrap 为什么必须显式设置
默认就是 nowrap，所有子项死扛在一行，宽度不够就溢出或压缩——你没看到换行，不是代码写错了，是根本没启用换行机制。只要容器内容长度不确定（比如用户输入的标签、动态卡片、多图列表），就必须手动加 flex-wrap: wrap，否则布局在窄屏下直接“消失”在右侧。
子项不换行？先检查 flex-shrink 和宽度约束
写了 flex-wrap: wrap 却不换行，大概率是子项拒绝收缩：
-
flex: 1或flex: 1 1 auto会让子项强行拉满剩余空间，彻底锁死换行机会 - 没设
flex-shrink: 1（或缩写中第二个值为 0），iOS Safari 和旧版 Chrome 就当它不可缩 - 直接写
width: 300px会覆盖 flex 计算，建议改用flex: 0 1 calc(33.333% - 12px)或min-width: 280px+flex: 1 1 0
gap 在 iOS 和 IE11 中不生效，得换方案
gap 看着干净，但在 iOS 15.4 以下和 IE11 完全无效，且 Safari 对 calc() 在 flex-basis 中解析不稳定：
- 用
margin模拟间距：给子项加margin-right和margin-bottom，再用:nth-child(n)清除每行末尾的margin-right - IE11 必须加前缀：
display: -ms-flexbox+-ms-flex-wrap: wrap - 避免在
flex-basis里混用百分比和像素，如calc(50% - 16px)在 IE11 会被忽略，改用固定像素值flex: 0 0 280px
换行后高度不齐、空隙错位，对齐属性别乱套
多行出现后，align-items 和 align-content 容易混淆：
-
align-items: stretch（默认）会让每行内所有子项拉高到该行最高项——这是卡片高度不一致的根源，改成align-items: flex-start就齐头了 -
align-content只对**多行生效**，控制行与行之间的垂直分布：flex-start贴顶、center整体居中（需容器有明确height） - 别给卡片设固定
height，内容少时留白难看；真要等高，优先考虑display: grid，flex 天然不适合跨行对齐
换行不是加个 wrap 就完事——子项能不能缩、间距怎么稳、多行怎么对齐、老浏览器怎么兜底，四点漏掉任何一点，都可能在某个设备上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
