ie10–11中flex-wrap: wrap失效主因是未声明display: -ms-flexbox、子项使用flex: 1或flex-basis: auto导致无基准宽度，以及父容器缺width/max-width；safari 8–9则因min-width与flex-basis优先级混乱引发错行，需显式前缀、百分比flex-basis、box-sizing: border-box及文本断行控制。
现代浏览器中 flex-wrap: wrap 默认就能换行，但 IE10–11 和 Safari 8–9 会“假装看不见”或算错换行点——问题不在要不要换行，而在它用什么基准去判断“该不该换”。
IE10–11 中 flex-wrap 不生效的典型写法
即使写了 flex-wrap: wrap，IE 仍把所有子项挤在一行，常见原因有：
-
display: flex没配display: -ms-flexbox——IE10–11 只认后者，忽略标准值 - 子项用了
flex: 1或flex-basis: auto——IE 把它当“无宽度锚点”，跳过换行判定 - 父容器没设
width或max-width——IE 在尺寸未明确时无法计算换行临界值 - 子项含
padding/border但没设box-sizing: border-box——百分比flex-basis被撑爆
正确写法要显式声明前缀和基准宽度：
.container {<br> display: -ms-flexbox;<br> display: flex;<br> -ms-flex-wrap: wrap;<br> flex-wrap: wrap;<br>}<br>.item {<br> -ms-flex: 0 0 33.33%;<br> flex: 0 0 33.33%;<br> box-sizing: border-box;<br>}
Safari 8–9 的 flex-wrap 换行错位
子项用了 min-width 或百分比 width 时，Safari 8–9 容易换行后高度塌陷、子项错行。这不是 bug，是它对 flex-basis 和 min-width 的优先级处理混乱。
- 避免同时写
flex: 1和min-width: 200px——改用flex: 0 1 auto+width: 0触发收缩 - 父容器必须显式设
width或max-width，不能靠内容撑开 - 必要时加 Safari 专属媒体查询覆盖：
@media screen and (-webkit-min-device-pixel-ratio: 0) { .container { -webkit-flex-wrap: wrap; } }
文字内容撑开导致换行失效
即使容器已设 flex-wrap: wrap，长英文单词、URL 或中文连续字符仍可能让子项变宽，挤占换行空间。关键不是 flex 属性本身，而是文本溢出控制没跟上。
- 必须加
overflow-wrap: break-word（标准）+word-wrap: break-word（IE 兼容） - 子项需设
min-width: 0——否则 flex item 默认min-width: auto会阻止收缩，让break-word失效 - 慎用
white-space: nowrap——它直接禁用所有自动换行，包括flex-wrap的布局换行 - 若需强制断字，可用
word-break: break-all，但注意它对中文也打断，非必要不启用
真正难控的从来不是“能不能折”，而是“折完哪一行先出现、高度怎么算、文字在哪断”。尤其当字体加载延迟、缩放变化或动态插入内容时，IE 和旧 Safari 对 flex-basis 的计算时机差异会被放大——别指望一次声明能覆盖所有场景，得在每个关键断点里重置它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
