IE10/11必须使用display: -ms-flexbox，不识别标准display: flex；需按顺序声明：-webkit-box、-ms-flexbox、-webkit-flex、flex，漏掉或顺序错误将导致布局退化为block。
IE10/11 必须写 -ms-flexbox，不能只靠 display: flex
IE10 和 IE11 完全不识别标准的 display: flex，只认 display: -ms-flexbox。哪怕你加了 Autoprefixer，如果 browserslist 里没明确写 ie >= 10，它根本不会生成这个前缀。
手动声明时顺序很重要：浏览器从上到下取第一个它认识的值，所以得把最老的语法放前面：
.container {
display: -webkit-box; /* Android 4.1–4.3, iOS 6.1–7.1 */
display: -ms-flexbox; /* IE10–11 */
display: -webkit-flex; /* Safari 6.1–8.0, iOS 7.1–8.3 */
display: flex; /* 标准语法 */
}- 漏掉
-ms-flexbox→ IE10/11 直接退化为 block 布局，整个 Flex 结构失效 - 把
display: flex写在最前面 → IE10/11 看到不认识就跳过，继续往下找，但若后面没-ms-就彻底失败 - Android 4.4 以下只吃
-webkit-box，连-webkit-flex都不处理，所以-webkit-box必须保留且放最前
flex 子项在 IE10/11 中塌缩？检查是否设了显式宽高或 min-height: 0
IE10/11 的 flex 子项如果没有显式宽度（width）或最小高度（min-height），flex: 1 很可能被忽略，导致子项高度为 0 或内容错位。
这不是前缀问题，是渲染引擎对“无约束主轴”的处理差异：
立即学习“前端免费学习笔记（深入）”；
- 在
flex-direction: row下，必须给子项设width或min-width（哪怕只是min-width: 0） - 在
flex-direction: column下，必须设height或min-height；若容器本身没高度，flex: 1子项也会塌缩 -
align-items: stretch+ 未设高的子项 = IE10/11 经典 bug，建议统一加min-height: 0
Safari 9–10 不支持 flex-wrap: wrap？用 @supports 隔离或降级
Safari 9.0–9.1 和 iOS Safari 9.0–9.2 完全不支持 flex-wrap，强行使用会导致子项溢出且不换行。它们只认老式 -webkit-box 语法，而 -webkit-box 本身就不支持换行。
不能靠 Autoprefixer 补出 flex-wrap —— 它只转属性名，不补功能。稳妥做法是特性检测：
@supports (flex-wrap: wrap) {
.container { flex-wrap: wrap; }
}
/* 不支持的浏览器自动 fallback 到单行或 JS 控制 */
-
@supports在 IE11 及更早版本中不支持，所以它只适用于 Safari/Chrome 等现代旧版 - 若需兼容 Safari 9，最好避免依赖
flex-wrap，改用媒体查询 +flex-direction: column模拟换行 - 不要混用
display: -webkit-flex和display: flex在同一规则里——Safari 9 会以后者覆盖前者并失效
别指望 autoprefixer 解决所有问题，browserslist 配置错了等于白配
Autoprefixer 不是万能的。它只做“标准语法 → 厂商前缀”的映射，不处理语法差异（比如 box-pack vs justify-content），也不修复 IE 的渲染 bug。
关键看 browserslist 是否精准匹配你的目标环境：
- 要支持 IE10，必须写
ie >= 10，否则-ms-前缀不会生成 - 要覆盖 Android 4.3，得加
and_chr 或 <code>android 4.3，否则-webkit-box不会出现 - 写了
last 2 versions但没提 Safari 版本 → Safari 9 可能被排除，-webkit-flex就不会输出 - 源码里若混写
display: box（旧 W3C 草案语法），Autoprefixer 完全不识别，直接忽略
真正容易被忽略的是：Flex 兼容性问题里，一半以上不是语法写错，而是容器或子项缺少尺寸锚点、browserslist 漏掉关键版本、或者把 @supports 当成 IE 兼容方案来用。
