flex-wrap: wrap 是让子元素换行的唯一可靠方式，需配合 flex-basis、min-width 及 box-sizing 等设置，并注意 gap 兼容性与 viewport 声明。
flex-wrap: wrap 是让子元素换行的唯一可靠方式
小屏幕下多个模块挤成一排、溢出容器或被截断，根本原因通常是父容器用了 display: flex 但没启用换行。默认值是 flex-wrap: nowrap，所有子项强行保持单行——哪怕宽度加起来远超屏幕。必须显式设为 wrap 才能触发自动折行。
只加 wrap 不够：还要控制子项最小宽度和 flex-basis
即使写了 flex-wrap: wrap，如果子项没有宽度约束，浏览器可能仍不换行（尤其当内容为空或只有内联文本时）。关键是要让每个模块有明确的“换行临界点”：
-
flex-basis设为具体值（如250px或50%），比单纯用width更符合 Flex 布局逻辑 - 配合
min-width防止子项在窄屏下被过度压缩（例如min-width: 200px） - 避免对子项设
white-space: nowrap或固定width且无响应退路
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.module {
flex: 1 1 240px; / flex-grow flex-shrink flex-basis /
min-width: 200px;
}
移动端常见失效场景：gap 和 justify-content 的干扰
某些旧版 Safari（iOS 14.5 之前）不支持 gap，若用 gap 替代 margin 做间距，又没配 fallback，会导致换行错位；justify-content: space-between 在仅剩一个子项时会把它推到最右，视觉上像“没换行”。建议：
- 用
gap时加降级：margin+@supports (gap: 12px)覆盖 - 换行布局慎用
justify-content，优先靠flex-basis和gap控制分布 - 真要居中多行？用
align-content: center，不是justify-content
别忘了 viewport meta 和 box-sizing
再正确的 flex 设置，在没声明视口或盒模型混乱时也会失效：
立即学习“前端免费学习笔记（深入）”；
- HTML 中必须有
- 全局重置
box-sizing：* { box-sizing: border-box; }，否则 padding/border 会让flex-basis计算偏移，导致本该换行的项卡住 - 检查是否意外继承了
white-space: nowrap到父容器（比如从某个 UI 库 CSS 泄漏过来）
实际换行行为取决于 flex-basis、容器宽度、gap 三者实时计算结果，没有“绝对安全”的像素值——得在真实设备或 Chrome DevTools 的 device mode 下反复拖动宽度验证。
