flex-wrap: wrap 是自动换行的唯一可靠开关，其默认值为 nowrap；子项需具备收缩能力（如 flex-shrink: 1）并避免固定宽度，配合 align-content 控制多行分布，且需注意 gap 和 flex-basis 的实际占用。
flex-wrap: wrap 是自动换行的唯一可靠开关
不设 flex-wrap，哪怕容器再窄、子项再宽，Flex 项目也死扛着不换行——这是初学者最常卡住的地方。它的默认值是 nowrap，不是 wrap，这点和 css Grid 的 wrap 行为完全不同。
实际用时必须显式写上：
container { display: flex; flex-wrap: wrap; }-
flex-wrap: wrap：换行，新行从主轴起点开始（如左对齐布局） -
flex-wrap: wrap-reverse：换行，但新行堆在旧行上方（适合底部对齐场景） -
flex-wrap: nowrap：强制单行，溢出就滚动或裁剪，不是“默认更安全”的选项
子项不收缩导致换行失效的典型表现
即使写了 flex-wrap: wrap，如果所有子项都设置了 flex-shrink: 0 或固定宽高（比如 width: 300px），它们会拒绝压缩，结果就是：宁可撑破容器也不换行。
产品列表里常见错误写法：
立即学习“前端免费学习笔记（深入）”；
.product { width: 280px; flex-shrink: 0; }正确做法是让子项具备弹性收缩能力：
- 删掉
flex-shrink: 0（默认就是1） - 避免给子项设死宽度，改用
flex: 1 1 280px（即flex-grow: 1; flex-shrink: 1; flex-basis: 280px） - 如果必须限制最小宽度，用
min-width而非width，留出收缩余地
justify-content 和 align-content 配合换行的边界行为
justify-content 控制的是单行内的对齐；只有开了 flex-wrap 且实际产生多行后，align-content 才起作用——它管的是行与行之间的分布。
产品列表常要居中对齐多行内容，但很多人只设 justify-content: center，发现首行居中了，第二行却贴左。这是因为：
-
justify-content: center→ 每行内部居中，不影响行间距 -
align-content: center→ 多行整体在交叉轴上居中（需容器有明确高度或 min-height） - 若容器高度不固定，
align-content无效，此时换行后各行会顶部对齐（默认align-content: stretch）
响应式断点下 flex-basis 计算容易误判
用 flex-basis 设子项基准宽（比如 flex-basis: 300px），在不同屏幕下是否换行，取决于「总基准宽」是否超过容器宽度。但浏览器计算时会把 gap、padding、border 全算进去，稍不注意就少换一行。
例如容器宽 920px，设 gap: 16px，子项 flex-basis: 300px，那最多只能塞下 2 个（300×2 + 16×1 = 616），第三个必然换行——但人眼常以为能塞 3 个。
- 用
flex-basis: calc(33.333% - 10.666px)替代固定像素，配合gap更可控 - chrome DevTools 的 Layout 面板里勾选 “Show flexbox overlays”，能直接看到每行实际容纳了几项
- 移动端小屏下，
flex-basis建议用minmax(280px, 1fr)配合display: grid回退，Flex 的换行逻辑在极端窄屏下不如 Grid 稳定
换行不是加个 wrap 就完事，真正卡住的永远是子项的收缩意愿、gap 的隐式占用，还有多行场景下 align-content 的生效前提——这些地方一漏，页面就僵在那儿不动了。