核心是必须显式设置flex-wrap: wrap，因默认值为nowrap；还需父容器有明确宽度、子项可收缩（如min-width: 0）、文本可断行（如word-break: break-word）。
Flexbox 实现自动换行，核心就一条：flex-wrap: wrap 必须显式写，不写就永远不换行——哪怕你加了 display: flex 也没用。
为什么写了 display: flex 还是不换行？
因为 flex-wrap 默认值是 nowrap，浏览器会死扛一行到底，宁可压缩子项、溢出容器，也不折行。
- 检查开发者工具里该属性是否被重置（比如 CSS 重置库或框架把
flex-wrap改回nowrap） - 父容器没设宽度（如
width: 100%或max-width），它可能撑满 viewport，子项永远“够得着” - 子元素设置了
flex-shrink: 0且总宽度超容器，浏览器放弃收缩，直接溢出
flex-wrap: wrap 和 flex-wrap: wrap-reverse 的区别
两者都允许换行，但新行堆叠方向相反：
-
flex-wrap: wrap：新行从上到下叠加（符合常规阅读流） -
flex-wrap: wrap-reverse：新行从下到上叠加（首行贴底），极少用于布局逻辑，属于 hack 用法
注意：flex-direction 会影响“换行”方向——flex-direction: column 下 wrap 实际是“换列”，内容往右跑，不是往下堆。
立即学习“前端免费学习笔记（深入）”；
换行后最后一行对不齐，间距忽大忽小？
这是 justify-content: space-between 的固有行为：它只对当前行生效。最后一行只有 1–2 个子项时，会被拉到两端，中间留大片空白。
- 改用
justify-content: flex-start，所有行左对齐，视觉更稳定 - 真要均匀分布，选
justify-content: space-around或space-evenly，它们对单行/多行都公平 - 别在
flex-wrap: wrap容器里混用margin-left: auto或float，Flex 下无效且干扰布局
移动端文字撑破卡片、换行失效怎么办？
flex-wrap 管的是子元素级换行，不是子元素内部文本的断行。长 URL、无空格字符串会把整个卡片撑宽，导致换行失败。
- 给卡片内容加
word-break: break-word或overflow-wrap: break-word - 给卡片本身设
min-width: 0，解除 Flex 项目默认的最小尺寸保护，允许它收缩 - 避免对卡片设
white-space: nowrap，这会直接禁用所有换行行为
真正卡住的地方，往往不在 flex-wrap 这一行，而在 min-width、gap 计算、文本断行或 justify-content 的行级作用域上。先盯住它，再一层层查依赖项。
