最常见原因是父容器未设display: flex；必须同时设置display: flex或inline-flex，flex-wrap才生效，且需确保无其他样式覆盖display值。
flex-wrap: wrap 为什么没生效
最常见原因是父容器没设 display: flex，光写 flex-wrap: wrap 没用。Flex 布局属性只在 Flex 容器上起作用，不是“加了就自动变弹性”。
- 必须同时设置
display: flex或display: inline-flex - 如果父元素是
float、absolute定位或有display: block强制覆盖，也会让 flex 行为失效 - 检查 computed styles，确认
display真的是flex，而不是被其他规则层叠掉
子元素不换行？可能是 min-width 或 content 撑开
即使设置了 flex-wrap: wrap，子元素仍可能挤在一行——尤其当它们有固定宽度、图片未约束、或文本无换行控制时。
-
img默认不缩放，加max-width: 100%和height: auto防溢出 - 文字长串（如 URL、token）用
word-break: break-all或overflow-wrap: break-word - 子元素设了
min-width: 0能避免 flex item 因内容过长拒绝收缩（默认min-width: auto）
wrap 和 wrap-reverse 的实际差异
flex-wrap: wrap-reverse 不只是“倒着排”，它会翻转主轴的换行方向：新行插在旧行上方（column 方向），但子元素在每行内的顺序不变。
- 适合做“新增项置顶”的列表，比如聊天消息流（新消息在顶部，老消息往下堆）
- 注意：如果同时用了
flex-direction: column，wrap-reverse表现会不同——此时它影响的是 cross-axis 上的排列顺序 - 别指望它替代
flex-direction: row-reverse，二者控制的轴不同，混用容易混乱
IE11 下 wrap 失效的兼容处理
IE11 对 flex-wrap 支持不完整，尤其遇到 flex: 1 子元素 + wrap 组合时容易卡死或错位。
立即学习“前端免费学习笔记（深入）”；
- 给子元素显式设
flex-basis（比如flex: 1 1 200px），避免 IE 对flex: 1的错误解析 - 不用
flex: auto或flex: initial，IE11 识别不稳定 - 如果必须支持 IE11，建议用媒体查询降级为
display: block+width百分比布局，而非强撑 flex wrap
真正卡住的点往往不在 flex-wrap 本身，而在子元素的尺寸边界是否被隐式锁死——尤其是图片、表格、内联块和未限制的文本容器。调样式前先看 computed width/min-width，比反复改 wrap 更快定位问题。
