flex-wrap 用于控制 Flex 子元素是否换行，默认值为 nowrap，必须显式设为 wrap 或 wrap-reverse 才能换行；其行为受 flex-direction 主轴影响，换行方向随之改变。
flex-wrap 是什么，什么时候必须设它
默认情况下，flex-wrap 的值是 nowrap，意味着所有子元素会强行挤在一行里，哪怕溢出容器也不换行。只有当你明确希望子元素“内容多时自动折到下一行”，才需要主动设置 flex-wrap: wrap（或 wrap-reverse）。这不是 Flex 布局的默认行为，不写就等于关着——很多人卡在这一步，以为加了 display: flex 就能自动换行。
flex-wrap: wrap 和 wrap-reverse 的实际区别
两者都允许换行，但第二行的堆叠方向不同：
-
wrap：从上到下依次新增行，新行出现在前一行下方（常规阅读流） -
wrap-reverse：新行出现在前一行上方，整体像倒着堆叠的卡片
注意：wrap-reverse 不影响单行内子项的排列顺序（仍由 flex-direction 控制），只翻转行的堆叠顺序。如果容器高度固定且顶部有留白，wrap-reverse 有时能让内容“顶上去”，但这属于 hack 用法，别依赖它做布局逻辑。
子元素不换行？先检查这三个地方
写了 flex-wrap: wrap 却还是不换行，大概率是以下某处被忽略：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器没设宽度（或设为
auto），导致它无限撑宽，子项永远“够得着”不换行 - 子元素设置了
flex-shrink: 0且总宽度超容器，浏览器宁可溢出也不缩放——此时要么放开收缩，要么加min-width: 0允许内容区域压缩 - 子元素内部有不折行的内容，比如长单词或 URL，需额外加
word-break: break-word或overflow-wrap: break-word
简单验证方法：临时给父容器加个 border: 1px solid red，看它实际占多宽；再把子元素 flex-basis 设成固定值（如 flex-basis: 200px），观察是否按预期换行。
和 flex-direction 搭配时的换行方向变化
flex-wrap 的行为始终相对于 flex-direction 定义的主轴。例如：
-
flex-direction: row+flex-wrap: wrap→ 换行方向是垂直向下（新行在下方） -
flex-direction: column+flex-wrap: wrap→ 换行方向是水平向右（新列在右侧）
这时候“换行”其实叫“换列”更准确。很多开发者在做响应式侧边栏时误以为 column 下也能“往下堆”，结果发现内容往右跑了——本质是主轴变了，换行轴也跟着转了 90°。
真正麻烦的不是怎么写 flex-wrap，而是它和 flex-basis、min-width、容器尺寸三者之间的博弈。调的时候别只盯着这一行 CSS，得把父宽、子基线、内容弹性全拉进视野里看。
