flex-wrap: wrap 不生效主因是容器缺明确宽度或子项总宽未超容器；wrap 新行在下，wrap-reverse 在上；设 flex-basis 可控换行；IE10/11 不支持 wrap-reverse 且 margin 影响换行判断。
flex-wrap: wrap 不生效的常见原因
直接写 flex-wrap: wrap 却没换行？大概率是容器没设宽度，或子项总宽未超容器。Flexbox 默认主轴是水平方向，flex-wrap: wrap 只在子项“挤不下”时才触发换行——不是靠内容多少，而是靠实际占据空间是否超出容器主轴尺寸。
- 容器必须有明确的
width或max-width（比如width: 300px），否则可能撑满父容器，永远“不挤” - 子元素不能都设了
flex-shrink: 0且总宽小于容器——它们宁可溢出也不换行 - 若子项用了
white-space: nowrap或固定宽高（如width: 200px），需确认它们加起来确实 > 容器宽度
wrap 和 wrap-reverse 的行为差异
flex-wrap: wrap 是从上到下新增行，新行在旧行下方；flex-wrap: wrap-reverse 则让新行出现在旧行上方，视觉上像“倒着堆叠”。这在需要底部对齐、或配合 align-content: flex-start/flex-end 调整多行间距时很关键。
-
wrap：第一行在顶部，后续行依次向下排列 -
wrap-reverse：第一行在底部，后续行依次向上排列（注意：单行时看不出区别） - 两者都不影响单行内子项的顺序（那是
flex-direction控制的）
配合 flex-basis 控制换行触发点
光靠容器宽度被动换行不够灵活，更可控的方式是给子项设 flex-basis，相当于“建议最小宽度”，再结合 flex-grow/flex-shrink 让它们弹性伸缩。例如：
.item {
flex: 1 1 120px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 120px */
}这样每项“希望占 120px”，当容器宽度不足 2×120px 时，第二项就会换行——比死卡容器 width 更适应响应式场景。
立即学习“前端免费学习笔记（深入）”；
- 避免只写
flex-basis: 120px而不设flex-shrink，否则子项可能溢出容器 - 用
min-width替代flex-basis也能影响换行，但不会参与 flex 分配计算 - 媒体查询中动态改
flex-basis是实现响应式栅格的常用手段
IE10/11 中 flex-wrap 的兼容性坑
IE10–11 支持 flex-wrap，但存在两个典型问题：一是不支持 wrap-reverse，二是当子项含 margin 时，换行判断可能错乱（把 margin 算进可用空间，导致提前换行）。
- 若需兼容 IE，避开
wrap-reverse，改用flex-direction: column+justify-content: flex-end模拟 - IE 下慎用子项的
margin-right做间隔，优先用gap（IE 不支持）或父容器padding+ 子项margin-left - 测试时务必用真实 IE 环境，Edge 浏览器的“IE 模式”模拟并不完全准确
实际换行逻辑依赖容器尺寸、子项弹性参数、以及浏览器对 flex 算法的实现细节——尤其在混合使用 width、flex-basis、margin 时，不同引擎可能给出不同结果。
