flex-wrap: wrap 是实现自动换行的唯一必要条件；默认 nowrap 会强制单行溢出，即使容器极窄也不换行，其他属性仅影响换行后的尺寸分配与对齐。
flex-wrap: wrap 是实现不同屏幕下自动折行的唯一必要条件，其他所有样式（如 flex-basis、flex-shrink、justify-content）都是配合它起效的辅助项。
为什么加了 display: flex 还不换行？
因为默认 flex-wrap 值是 nowrap，不是 wrap。Flex 容器哪怕宽度只剩 1px，只要没显式写 flex-wrap: wrap，子项就死扛着不换行——压缩、溢出、隐藏，都不会折行。
- 常见错误：只写了
display: flex和flex-direction: row，漏掉flex-wrap - 检查方法：在浏览器开发者工具里看 computed 样式，确认
flex-wrap是否为wrap - 注意：
flex: 1、width: 200px等属性对换行与否毫无影响，它们只影响单行内的尺寸分配
换行后子项堆成一列或错位怎么办？
换行后变成多行，justify-content 就只管每行内部对齐，不管行与行之间怎么排；真正控制“多行整体在交叉轴上如何分布”的是 align-content。
- 若子项高度不一致，又没设
align-content，多行可能顶部对齐、留大片空白 - 常用值：
flex-start（顶对齐）、center（居中）、stretch（拉满容器高度） -
align-items仍有效，但它只作用于每行内子项的交叉轴对齐（比如单行里文字垂直居中）
小屏下单个子项太宽、撑满整行怎么办？
默认 flex-basis 是 auto，子项按内容宽度计算基础尺寸，容易在窄屏下直接占满一行，失去“多列”效果。
- 推荐用
flex: 0 0 calc(50% - 10px)：禁止伸缩（flex-grow: 0）、禁止收缩（flex-shrink: 0）、固定基础宽度（flex-basis） - 数值中的
10px是预估的左右 margin 总和，避免因间隙导致换行异常 - 更稳妥的做法是搭配
min-width，例如min-width: 240px，再配flex: 1实现“最小宽度 + 剩余空间均分”
大屏下也意外换行，是不是 flex-wrap 太敏感？
不是太敏感，是子项本身“不肯让步”。flex-wrap: wrap 的逻辑很机械：只要某行所有子项的 flex-basis + 间距 > 容器可用宽度，就立刻换行。
- 典型诱因：
white-space: nowrap让文本不折行，间接撑宽子项；或子项含width: 100%/max-width: none且未设flex-shrink: 0 - 调试技巧：临时给子项加
outline: 1px solid red，看真实占用宽度是否超出预期 - 根本解法：明确每个子项的弹性行为，比如图文组合用
flex: 1，固定卡片用flex: 0 0 300px
换行逻辑本身极简，但实际表现千差万别，关键不在 flex-wrap 写没写，而在于你是否清楚每个子项的 flex-basis、flex-shrink 和内外边距如何共同决定了“什么时候会撑爆一行”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
