ie10/ie11完全不支持flex-wrap，连-ms-flex-wrap也无效；ie11换行失效主因是flex-basis解析缺陷，需设显式百分比值并禁用flex:1；safari偶发失效多因viewport缺失或white-space:nowrap冲突；文字溢出需配合min-width:0与overflow-wrap。
IE10/IE11里flex-wrap完全不生效
不是兼容性“打折扣”，是压根没实现——flex-wrap: wrap在IE10/IE11里被直接忽略，连-ms-flex-wrap: wrap也无效。调试器里能看到该样式被划掉（strikethrough），但控制台无报错，这是典型属性未识别表现。
别试前缀、别调顺序、别加!important，这些都无效。必须换技术路线。
- 父容器设
font-size: 0消除inline-block间隙 - 子元素用
calc(33.333% - 2px)而非33%，避免IE小数计算误差撑破行 - 子元素内重置
font-size，否则文字不可见 - 边框/内边距必须显式减进
calc()，例如width: calc(50% - 12px)（含左右border+padding）
IE11中flex-wrap写了但还是不换行
这不是属性失效，而是IE11对flex-basis的解析缺陷：当子项flex-basis为auto或0%时，它会跳过换行判断，强行挤一行直到溢出。
关键不是加flex-wrap，而是给每个子项显式设百分比flex-basis：
- 用
flex-basis: 33.33%而不是33%，IE对小数精度敏感，33%可能被截断为0 - 禁用
flex: 1简写——它展开为flex: 1 1 0%，而0%正是IE换行失效的根源 - 必须配
box-sizing: border-box，否则padding/border会让实际宽度超限 - 响应式断点里要重复声明
flex-basis，IE可能在min-width/max-width切换时丢弃原值
移动端Safari flex-wrap偶发失效
同一段CSS在Chrome模拟器正常，真机Safari却死活不换行？大概率是WebKit的“最小内联尺寸”逻辑被触发，和viewport或字体渲染有关。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
先快速验证是否被覆盖：
- 检查
<meta name="viewport" content="width=device-width, initial-scale=1">是否存在且拼写正确 - 在Safari开发者工具里手动勾选/取消
flex-wrap，看是否立即响应——不响应说明有更高优先级规则层叠 - 移除所有
white-space: nowrap，它会锁死单行，直接压制flex-wrap - 避免用
flex: 0 1 auto，某些iOS Safari版本解析异常，改用flex: 0 1 fit-content或flex: 0 1 100%
flex-wrap生效但文字仍横向溢出
flex-wrap: wrap只管子项是否换行，不管子项内部文字要不要折。如果子项里有长单词、URL或中文块，它会撑开整个子项，导致换行失效或溢出。
必须配合两层控制：
- 子项加
min-width: 0——这是flex子项换行的隐性开关，默认min-width: auto会宁可撑容器也不缩小自己 - 子项内文本加
overflow-wrap: break-word（旧版用word-wrap: break-word），优先保持单词完整 - 仅对超长无空格字符串（如base64）兜底加
word-break: break-all，别全局滥用，中文会被无差别断字 - 响应式断点里重置
white-space：桌面端用了nowrap，移动端必须显式设回white-space: normal
真正麻烦的不是写多少代码，而是IE和Safari各自有一套“不按常理出牌”的解析逻辑，得挨个绕过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
