flex-wrap: wrap 实现换行需配合 flex-basis（或 width + flex: 0 1 auto）和容器明确宽度，否则子项可能不折行；推荐用 gap 而非 margin，并注意 white-space 和溢出处理。
flex-wrap: wrap 是换行的前提，但只设它还不够
单纯写 flex-wrap: wrap 只是告诉容器“允许子项换行”，但子项本身如果太宽，依然会撑满一行不折。关键在于让每个子项有明确的“最大宽度边界”，否则 flex 默认会尽可能拉伸（尤其当 flex-grow: 1 或没设 flex-shrink 时）。这时候必须配合 flex-basis 或等效的宽度控制手段。
用 flex-basis 控制单个子项的基础尺寸
flex-basis 定义了子项在主轴上的初始大小，它是换行计算的基准。浏览器会先按 flex-basis 分配空间，再根据剩余空间和 flex-grow/flex-shrink 调整。常见错误是只写 width，但在 flex 布局中，width 会被 flex-basis 覆盖（除非 flex-basis 是 auto）。
- 想让每个子项最多占容器的 33.33%，就设
flex-basis: 33.33% - 要留间隙，建议用
gap，而不是margin—— 后者可能干扰换行判断 - 避免同时设
flex-basis: 0和flex-grow: 1，这会让子项均分剩余空间、失去换行依据
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
<p>.item {
flex-basis: calc(33.333% - 8px); /<em> 减去 gap 的一半影响，更稳 </em>/
flex-grow: 0;
flex-shrink: 1;
}替代方案：用 width + min-width 配合 flex-wrap
如果你不想深入 flex-basis 的计算逻辑，直接用 width 也能生效——前提是把 flex 简写属性拆开，或显式设 flex-basis: auto。否则 flex: 1 这类简写会覆盖 width。
-
flex: 0 1 auto表示不放大、可缩小、基础尺寸由width决定 - 加
min-width: 0防止内容过长时子项强行撑宽（比如长单词、URL） - 移动端适配常用
min-width: 240px+flex-basis: 100%实现单列回退
.item {
width: 200px;
flex: 0 1 auto;
min-width: 0;
}容易被忽略的坑：内容溢出和 shrink 失效
即使写了 flex-wrap: wrap 和 flex-basis，如果子项里有不可折行的内容（如长串无空格字符串、white-space: nowrap 的文本），浏览器仍可能拒绝换行，导致横向滚动或布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 检查子项是否意外继承了
white-space: nowrap - 对文本内容加
overflow-wrap: break-word或word-break: break-word - 确保父容器有明确宽度（比如
max-width或固定width），否则 flex 容器可能无限宽，换行条件永不满足
真正起作用的是 flex-basis + flex-wrap + 容器宽度三者的共同约束，少一个都可能让换行失效。
