Flex容器默认flex-wrap:nowrap导致子项不换行，必须显式设置wrap；即使设了wrap，子项仍可能因flex-shrink:1被压缩而非换行，需设flex-shrink:0或min-width。

子项被挤到一行、换行失效，先看 flex-wrap

Flex 容器默认是 flex-wrap: nowrap，所有子项强行塞进一行，超出也不折行——这不是 bug，是设计行为。只要没显式设置 flex-wrap: wrap 或 wrap-reverse，子项就永远不会自动换行。

常见误判：以为加了 width 或 flex-basis 就能触发换行，其实不行；换行开关只在容器上。

• 检查父容器是否写了 flex-wrap: wrap
• 别只查 CSS 类名，用浏览器开发者工具直接看 computed 样式里的 flex-wrap 值
• 注意继承干扰：如果父容器外还有 flex 容器且设了 nowrap，可能影响嵌套结构

flex-wrap: wrap 加了还是不换行？查子项的 flex-shrink 和宽度

即使开了 wrap，子项仍可能被压缩成窄条、看似“挤在一起”——本质是它们被缩小了，而非没换行。

根本原因常是：flex-shrink: 1（默认值）允许子项收缩，而容器宽度不够时，浏览器优先缩放子项，而不是换行。

立即学习“前端免费学习笔记（深入）”；

• 给子项加 flex-shrink: 0 阻止压缩，逼它换行
• 或显式设 min-width（如 min-width: 200px），让浏览器知道“不能再小了，必须换行”
• 避免同时设 flex: 1 和 width，二者冲突易导致不可预期收缩

用 flex-basis 控制换行临界点

flex-basis 决定子项在换行前的“理想宽度”，它比 width 更直接影响 wrap 行为。

比如容器宽 600px，三个子项都设 flex-basis: 250px，总和 750px > 600px → 第三项必然换行。

• 用 flex-basis 替代纯 width，对换行更可控
• flex-basis: auto 会读取 width，但若 width 是 auto 或未设，则按内容宽计算，容易误判
• 调试时可在子项上临时加 border: 1px solid red，直观看是否真换行还是只是被压扁

.container {
  display: flex;
  flex-wrap: wrap; /* 必须显式开启 */
}
.item {
  flex: 0 0 200px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 200px */
  min-width: 200px;
}

真正卡住的往往不是语法写错，而是把 flex-wrap 当成可有可无的修饰，或者以为子项自己能“感知空间不足”主动换行——它不会，全靠容器策略和子项收缩规则共同决定。