flex-wrap: wrap是换行的必要前提，必须写在父容器上；需配合合理flex-basis、容器宽度及内容弹性控制才能实现预期换行。
不加 flex-wrap: wrap 就永远不会换行——这是最常被忽略的硬性前提，不是可选配置，而是换行引擎的“点火开关”。
为什么写了 display: flex 还是不换行？
因为 flex-wrap 默认值是 nowrap，浏览器会强行压缩或溢出子项，绝不会主动折行。这不是 bug，是 Flex 的设计逻辑：它只在你明确说“可以换”时才换。
- 检查是否漏了
flex-wrap: wrap（不是写在子项上，必须写在父容器上） - 父容器没设
width、max-width或被祖先元素撑成auto，导致“永远够宽”，换行条件永不触发 - 子项用了
flex: 1或flex-shrink: 0，内容宁可溢出也不缩小，换行无从谈起 - 子项内有长单词、URL 或未设
word-break: break-word，内容撑爆单行宽度，间接锁死换行
flex-basis 怎么设才让换行按预期发生？
换行不是靠“猜空间”，而是靠子项有可衡量、可收缩的基准尺寸。只写 flex: 1 等于放弃控制权。
- 避免
flex: 1、flex: 1 1 auto：它们会让子项抢满整行，换行逻辑直接失效 - 推荐
flex: 0 1 200px：不放大、可缩小、基准宽设合理最小值（如卡片最小宽度） - 响应式场景用
flex: 0 1 calc(33.333% - 12px)配合gap: 12px，避免 margin 导致错位 - 慎用
flex-basis: 100%：它会让每个子项独占一行，不是“自动换行”，是“强制单列”
换行后多行对齐总出问题？
align-items 和 align-content 完全不是一回事：前者管每行内子项怎么排，后者管“行”本身怎么分布。
- 单行时，
align-items: center让图标/文字垂直居中 - 换行后，
align-content: flex-start让所有行顶部对齐（最常用） -
align-content: center要求容器有明确height，否则无效 - 别用
align-items: stretch（默认值）配高度不一的卡片，会导致视觉参差
gap 在多行 Flex 中只管内部，不管边缘
gap 确实能统一控制行列间距，但它只作用于子项之间，**不会给容器四边自动加留白**。第一行顶部、最后一行底部、最左列左侧、最右列右侧，都没有 gap。
- 新手常误以为
gap: 16px等价于给所有子项加margin，结果发现边缘紧贴容器边界 - 如需边缘留白，得额外加
padding到父容器 - Safari 14.1 以下不支持
gap，需用margin模拟，但要注意最后一行子项的margin-right可能溢出 - IE11 完全不支持
gap，老项目必须回退到margin+ 清除逻辑
真正卡住人的，从来不是 flex-wrap: wrap 这一行代码，而是它和 flex-basis、容器宽度、内容弹性三者之间的实时博弈——调的时候得把这三块同时拉进 DevTools 里看，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
