加flex-wrap: wrap是唯一有效方式，不加则所有子项强制单行显示，即使溢出或压缩也不换行；必须配合父容器明确宽度、子项可收缩及内容可断行，否则换行仍失效。
加 flex-wrap: wrap 是唯一有效方式，不加它，其他任何操作（包括 width: 100%、flex-basis: 100%、插入空 <div>）都只是副作用或 hack，不可靠、难维护、在 Safari/IE11 下大概率失效。
为什么只写 display: flex 就不换行？
Flex 容器默认 flex-wrap: nowrap，这是硬性规则。浏览器会强行把所有子项压进单行，哪怕溢出容器、滚动条出现、内容被压缩到看不见——它不是“忘了换”，是根本没开启换行模式。
- 检查是否漏写了
flex-wrap: wrap或简写flex-flow: row wrap - 别信“我加了
width: 100%就该换行”——没wrap时，这个width要么被忽略，要么导致横向滚动 - 用浏览器开发者工具查 computed 样式，确认
flex-wrap确实是wrap，而不是继承值或未设置
flex-wrap: wrap 加了还是不换行？先盯这三个点
常见失效不是属性写错，而是尺寸逻辑没对齐：浏览器判断“放不下”需要明确依据。
- 父容器没设宽度（比如
width: auto且无 max-width），它会被撑成无限宽，“永远放得下” - 子元素用了
flex-shrink: 0或white-space: nowrap，内容无法压缩，总宽度超限也不让步 - 子元素内有长单词、URL 或固定宽图片，需配合
min-width: 0+overflow-wrap: break-word才能触发收缩
换行后对齐和间距怎么稳住？
flex-wrap: wrap 只管“要不要折行”，不管“折完怎么排”。多行场景下，justify-content 和 align-content 必须配合使用，且行为有严格前提。
立即学习“前端免费学习笔记（深入）”；
-
justify-content: center只对单行生效；多行时首行居中，其余行左对齐是正常表现，不是 bug - 要控制多行在交叉轴（如垂直方向）的分布，必须用
align-content，但它在仅有一行时完全无效 - 用
gap控制子项间距最干净，但注意：如果给某子项单独设width: 100%，它的实际宽度会变成 “100% + gap”，可能撑破容器
真正麻烦的从来不是加哪一行 CSS，而是子项的 flex-basis、容器宽度、内容可压缩性三者是否形成稳定换行条件——尤其在 Safari iOS 15–16 和 IE11 下，flex-basis: 100% 计算偏差大，gap 渲染异常多，空 <div> 常被忽略。上线前务必在真机上测最小视口宽度下的换行点是否准确。
