flex-wrap: wrap 在容器主轴空间不足时触发换行，nowrap 则强制单行；换行需同时满足：容器有明确主轴约束、子项可压缩、子项总宽（含gap）超容器可用空间。
flex-wrap: wrap 和 nowrap 的实际行为差异
两者控制的是 flex 容器内项目在主轴方向空间不足时的换行策略，不是“是否允许换行”的开关，而是“换行是否被允许且生效”的声明。默认值是 flex-wrap: nowrap，此时所有项目会被强制压缩或溢出容器，不会折行。
关键点在于：只有当容器主轴尺寸固定（如设了 width 或 max-width），且子项总宽度超过该尺寸时，wrap 才会真正触发换行；若容器宽度自适应（比如 width: auto 且父容器足够宽），即使设了 wrap，也不会出现换行。
为什么设置了 flex-wrap: wrap 却不换行？
常见原因不是属性写错，而是布局条件未满足。需要同时满足三个条件才会换行：
- 容器必须有明确的主轴约束（例如
width: 300px、max-width: 400px，或受父容器限制） - 子项没有设置
flex-shrink: 0或min-width过大，导致无法被压缩，但又不足以触发换行（此时可能溢出） - 子项总基础宽度（含 gap） > 容器主轴可用空间
典型误操作：flex-wrap: wrap 配合 white-space: nowrap 在子项上，会阻止文本换行，但不影响 flex 项目本身的位置换行——这两者作用层级不同，别混淆。
立即学习“前端免费学习笔记（深入）”；
nowrap 不等于“绝对不折行”，它只禁用 flex 换行
flex-wrap: nowrap 只影响 flex 项目的排列方式，对内部文本、图片等仍遵循自身排版规则。比如：
- 子项是
<div>很长的一段文字</div>，即使容器窄，文字仍会在内部自动折行（由word-break或overflow-wrap控制） - 子项设置了
white-space: nowrap，文字不折，又没设overflow: hidden，就会横向溢出 - 子项是图片且未设
max-width: 100%，nowrap下它可能撑破容器
也就是说：nowrap 管的是“项目整体是否拆到下一行”，不管项目内部怎么渲染。
配合 gap 和 justify-content 使用时的注意点
gap 会影响换行判断：flex 布局中，gap 是算在主轴剩余空间里的。例如容器宽 600px，3 个子项各宽 200px，看起来刚好填满；但如果加了 gap: 16px，实际需要 600 + 2×16 = 632px 才能不换行——此时哪怕只多 1px，wrap 就会生效。
justify-content 对换行无直接影响，但它会改变子项在单行内的分布。特别注意：justify-content: space-between 在仅剩一行时表现正常，一旦换行，第二行子项会靠左对齐（因为每行独立计算），这不是 bug，是规范行为。
如果希望多行都均匀分布，得用 display: grid 或 JavaScript 补齐空项，flexbox 本身不支持跨行对齐控制。
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 320px; /* 关键：必须设宽度才能触发 wrap */
}
.item {
flex: 0 0 140px; /* 不伸缩、不收缩、基准宽 140px */
}上面这段代码里，两个 .item 总宽 280px + gap 12px = 292px，小于 320px，所以只有一行；加第三个 item 后变成 420px + 2×12px = 444px > 320px，第三项就会掉到第二行。
最容易被忽略的，是把 flex-wrap 当成“响应式换行开关”直接塞进全局 class，却不检查容器宽度是否真的受限——结果就是写了等于没写。
