必须显式写flex-wrap: wrap，否则商品卡片永远不换行；因flex-wrap默认为nowrap，浏览器强制单行压缩或溢出，非bug而是设计逻辑，需同时确保父容器有明确宽度、子项可收缩且flex-basis设置合理。
必须显式写 flex-wrap: wrap，否则商品卡片永远不换行——这不是兼容性问题，是 Flex 的默认行为。
为什么写了 display: flex 却还是单行溢出？
因为 flex-wrap 默认值是 nowrap，浏览器会强行压缩或横向滚动，绝不会主动折行。你看到的“不换行”，不是 bug，是设计如此。
- 检查父容器是否漏了
flex-wrap: wrap（必须写在父容器上，子项上写无效） - 确认父容器有明确宽度约束（
width、max-width或被响应式祖先限制），否则“永远够宽”，换行条件永不触发 - 子项若用了
flex: 1或flex-shrink: 0，它宁可撑破容器也不缩小，换行逻辑直接失效
商品卡片该用 width 还是 flex-basis？
用 width 容易和 Flex 的伸缩机制冲突：小屏下可能裁剪图片、文字溢出或强制横向滚动；而 flex-basis 是 Flex 布局的尺寸锚点，配合收缩行为才可控。
- 推荐写法：
flex: 0 0 200px（不放大、不缩小、基准宽 200px），适合固定最小宽度的卡片 - 响应式场景更稳：
flex: 0 0 calc(33.333% - 12px)+gap: 12px，避免 margin 错位 - 绝对避免：
flex: 1、flex: 1 1 auto，它们会让卡片抢满整行，换行彻底失效 - 慎用：
flex-basis: 100%，这等于每张卡片独占一行，不是“自动换行”，是“强制单列”
换行后多行对齐总不对齐？
align-items 和 align-content 完全是两回事：前者管每行内子项怎么排，后者管“行”本身怎么分布。新手常混淆，导致第一行居中、第二行贴顶。
立即学习“前端免费学习笔记（深入）”；
- 列表类内容（如商品瀑布流）用
align-content: flex-start，所有行顶部对齐，避免底部大片留白 -
align-content: center要求容器有明确height，否则无效；别指望它在无高度容器里“自动居中” -
gap只作用于子项之间，**不会给容器四边加留白**——边缘紧贴是正常现象，需额外加padding补足 - Safari 14.1 以下和 IE11 不支持
gap，老项目得回退到margin+ 清除逻辑，且最后一行margin-right易溢出
真正卡住人的，从来不是那一行 flex-wrap: wrap，而是它和 flex-basis、容器宽度、内容弹性三者之间的实时博弈——调的时候得把这三块同时拉进控制范围，少盯一个，换行就在某个分辨率或某台设备上突然消失。
