flex-wrap生效的前提是父容器必须设置display: flex或inline-flex；它仅作用于弹性容器，子元素设该属性无效，且需避免float、absolute等破坏Flex流的样式。
flex-wrap属性不生效？检查父容器是否设了flex
很多人写了flex-wrap: wrap但子元素死活不换行，根本原因是父容器没真正进入Flex上下文——只加display: flex才生效，display: inline-flex也行，但display: block或没设display就完全无效。
常见错误现象：flex-wrap写在子元素上、父容器用了float或position: absolute打断了Flex布局流、CSS优先级被其他规则覆盖（比如用开发者工具看computed值里flex-wrap是不是显示nowrap）。
- 必须作用于弹性容器（即设置了
display: flex或display: inline-flex的父元素） - 子元素不能同时设
white-space: nowrap+overflow: hidden强行压成一行 - 如果父容器宽度是
fit-content或被内容撑开，可能根本没有“空间不足”触发换行
wrap和wrap-reverse的区别不只是方向
flex-wrap: wrap让子元素从主轴起点开始排列，换行后新行在交叉轴的下一个位置（比如flex-direction: row时，新行在下方）；flex-wrap: wrap-reverse则把交叉轴方向翻转，新行出现在上方或左侧——但它不改变主轴顺序，也不等价于旋转整个容器。
使用场景：做顶部固定导航栏时，想让溢出菜单自动“向上展开”，就可以用flex-wrap: wrap-reverse配合align-content: flex-end，避免遮挡头部内容。
立即学习“前端免费学习笔记（深入）”；
-
wrap-reverse对齐行为依赖align-content，不是单纯“倒着排” - 在
flex-direction: column下，wrap会向右换列，wrap-reverse向左换列 - 部分老版Safari（wrap-reverse支持不稳定，生产环境建议加
@supports检测
子元素不换行？可能是min-width或flex-basis卡住了
即使父容器设了flex-wrap: wrap，只要某个子元素的最小宽度（min-width）超过父容器剩余空间，它就会强行撑宽整行，导致其他元素被挤到下一行甚至溢出。更隐蔽的是flex-basis设为auto且内容很长时，浏览器按内容自然宽度计算，也可能突破容器。
典型错误：用input或textarea做弹性子元素，没设min-width: 0，输入长文本后直接撑爆容器。
- 给可能内容过长的子元素加
min-width: 0（尤其图片、表单控件、带文字的div） - 慎用
flex-basis: 100%——它会让元素占满整行，相当于禁用换行 - 用
flex: 1 1 0代替flex: 1，显式设flex-basis为0，让分配更可控
flex-wrap在响应式中要配合flex-direction动态切换
纯靠flex-wrap解决不了小屏下的垂直堆叠需求。比如PC端横排+换行，移动端需要竖排单列——这时候不能只改flex-wrap，得配合flex-direction: column，否则换行后还是横向多行，视觉上更乱。
性能影响很小，但逻辑容易绕：同一套HTML，在row下wrap是“多行横排”，在column下wrap是“多列竖排”，而column + wrap-reverse会让列从底部开始堆。
- 媒体查询里同时改
flex-direction和flex-wrap，别只动一个 - 移动端慎用
align-items: stretch，配合flex-direction: column时会让所有子元素高度拉满屏幕 - 如果子元素有固定高度（如
height: 200px），flex-direction: column下它们不会自动适应屏幕高度，需用max-height或flex: 1约束
flex-wrap从来不是孤立参数，它和flex-direction、min-width、flex-basis咬合紧密，漏掉任意一环都可能让换行表现和预期差很远。 
