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 更适应响应式场景。
