flex-wrap: wrap 必须显式设置，仅 display: flex 默认 nowrap 会导致子项溢出；需配合 flex-shrink 控制、gap 间距、align-content 行对齐及 box-sizing 等细节才能确保正确换行。
flex-wrap: wrap 必须显式设置
只写 display: flex 不会自动换行，这是最常踩的坑。Flex 容器默认 flex-wrap 值是 nowrap，所有子项会被强行压在一行，哪怕溢出屏幕或文字被压缩变形。移动端尤其明显——窄屏下本该折行，结果出现横向滚动条或内容错位。
必须同时写：
display: flexflex-wrap: wrap
漏掉任意一个，换行都不会发生。Tailwind 的 flex-row、Bootstrap 的 d-flex 等工具类也默认不带 wrap，得额外加 flex-wrap 或对应修饰符。
子项宽度和 flex-shrink 决定是否真能换行
即使写了 flex-wrap: wrap，如果子项“拒绝缩小”，浏览器仍可能不触发换行。常见原因有：
- 子项设了
flex-shrink: 0（比如用了flex: 0 0 auto或flex: none） - 子项有固定
width且总宽未超容器，但单个内容过长（如 URL、长英文单词）撑开实际尺寸 - 父容器没设
max-width或受上级限制导致可用宽度不可控
修复建议：
- 用
flex: 1 1 0替代flex: 1，避免子项无节制拉伸 - 对含文本的子项加
min-width: 0+word-break: break-word，防止内联内容撑破布局 - 临时加
border: 1px solid red到父容器，确认它实际渲染宽度是否符合预期
gap 和 align-content 影响换行后的视觉效果
换行后，多行之间默认没有间隙，gap 是解决这个问题最干净的方式——它比手动给每个子项设 margin-right/bottom 更可靠，且自动处理末项多余间距。
但要注意：gap 只在 Flex 容器启用 flex-wrap: wrap 后才对行间生效；而行与行之间的垂直对齐由 align-content 控制，不是 align-items：
-
align-content: flex-start：所有行顶部对齐（适合列表、导航） -
align-content: stretch（默认）：行被拉伸填满容器高度，若子项高度不一，易产生意外空隙 -
align-content: center：需容器有明确高度，否则无效
IE11 对 flex-wrap 支持不完整，若需兼容，应避免 flex: 1，改用 flex: 0 0 calc(33.333% - 8px) 类似写法，并补 display: -ms-flexbox 和 -ms-flex-wrap: wrap。
移动端特别注意 viewport 和 box-sizing
很多换行失效问题其实和 Flex 无关，而是基础环境缺失：
- 没声明
<meta name="viewport" content="width=device-width, initial-scale=1">，导致移动端按桌面宽度渲染，容器“看起来够宽”，实际根本不会触发换行 - 子项用了
box-sizing: content-box（默认），再加padding或border就会让实际宽度超预期，挤压换行时机 - 用百分比
width配合gap时，没同步调整box-sizing: border-box，造成计算偏差
推荐组合：移动端一律用 box-sizing: border-box + gap + min-width: 0 + word-break: break-word，四者缺一都可能让某台手机上突然不换行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
