flex-wrap 是控制 Flex 容器子项是否换行的属性，默认 nowrap 强制单行；wrap 允许换行且新行从主轴起点开始；wrap-reverse 则从主轴终点开始。
flex-wrap 是什么，为什么默认不换行
Flex 容器默认行为是 flex-wrap: nowrap，所有子项会被强行压在同一行，哪怕溢出容器也不折行。这不是 bug，而是 flex 布局的初始设计目标：单行对齐与伸缩。要让子项在空间不足时自动换行，必须显式设置 flex-wrap。
三种 flex-wrap 取值的实际效果差异
flex-wrap 有三个合法值，各自影响布局方向和换行逻辑：
-
nowrap：强制单行，子项可能溢出或被压缩（取决于flex-shrink） -
wrap：允许换行，新行从主轴起点开始（比如flex-direction: row时，新行在下方） -
wrap-reverse：换行但新行从主轴终点开始（row下新行在上方，会改变视觉堆叠顺序）
多数响应式卡片/标签列表场景只需 wrap；wrap-reverse 较少用，常用于翻转滚动方向或特殊 UI 排序。
换行后对齐方式需要单独控制
仅设 flex-wrap: wrap 不等于“换行后自动居中”——换行后的每一行仍受 justify-content 控制，而**跨行对齐**（即多行之间的垂直分布）由 align-content 决定。常见误区是只调 justify-content 却发现第二行靠上贴边：
立即学习“前端免费学习笔记（深入）”；
- 若希望多行在容器内垂直居中，设
align-content: center - 若希望行与行之间等距分布，用
align-content: space-between -
align-content在单行时无效，此时只有align-items起作用
例如：
.container { display: flex; flex-wrap: wrap; align-content: center; }
flex-wrap 和 flex-basis 共同决定何时换行
换行触发点不是单纯看屏幕宽度，而是看**子项总基础宽度是否超过容器主轴尺寸**。而每个子项的“基础宽度”由 flex-basis 决定（默认为 auto，即内容宽度）。如果子项没设 flex-basis 或设得过大，即使容器变窄，也可能因内容撑开而不换行。
- 推荐为子项设置明确的
flex-basis，如flex-basis: 200px或flex-basis: 30% - 配合
flex: 1 1 auto可让子项在换行后仍能弹性伸缩 - 避免仅依赖
width，因为width不参与 flex 计算，flex-basis才是换行判断依据
容易忽略的一点：当子项含不可压缩内容（如长单词、固定宽图片），需额外加 min-width: 0 或 overflow-wrap: break-word 防止换行失效。
