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 当成可有可无的修饰，或者以为子项自己能“感知空间不足”主动换行——它不会，全靠容器策略和子项收缩规则共同决定。
