<p>IE11 中必须加 -ms- 前缀的 flex 属性包括：justify-content → -ms-justify-content，align-items → -ms-align-items，flex-wrap → -ms-flex-wrap，order → -ms-flex-order；flex: 1 需拆解为 -ms-flex-positive、-ms-flex-negative、-ms-flex-preferred-size 三属性；@supports 不被 IE11 识别，须裸写 -ms-flexbox 降级并包裹现代增强。</p>
IE11 支持 display: flex，但行为和属性名与标准严重不一致——不是“差一点”，而是必须手动补全 -ms- 前缀、拆解缩写、重写对齐逻辑，否则布局直接崩塌。
IE11 中哪些 flex 属性必须加 -ms- 前缀且不能只靠 autoprefixer
autoprefixer 只补声明，不修语义。IE11 认得 display: flex，但对以下关键属性完全无视，必须显式加 -ms-：
-
justify-content→ 必须写-ms-justify-content: center（space-between在 IE11 里要写成distribute） -
align-items→ 必须写-ms-align-items: flex-start（stretch在 IE11 中常失效） -
flex-wrap→ 必须写-ms-flex-wrap: wrap（wrap-reverse完全不支持） -
order→ 必须写-ms-flex-order: 2，否则 DOM 渲染顺序错乱
漏掉任意一项，IE11 就按默认流式布局渲染，元素堆成一列或顶左对齐。
flex: 1 在 IE11 中为何失效？怎么写才真正生效
flex: 1 在 IE11 中被解析为 flex: 1 1 0%，但它的 flex-basis 对百分比计算错误，常导致子项宽度为 0。必须拆开并显式指定单位：
立即学习“前端免费学习笔记（深入）”；
- 写成三行原子声明：
flex-grow: 1、flex-shrink: 1、flex-basis: 0% - 对应 IE11 补全：
-ms-flex-positive: 1、-ms-flex-negative: 1、-ms-flex-preferred-size: 0% - 避免用
flex-basis: auto—— IE11 会误算为 0px
更稳妥的做法是：对等分布局场景，直接放弃 flex: 1，改用 width: 33.333% + box-sizing: border-box。
@supports 能否用于 IE11 的 flex 降级？为什么不能
不能。@supports (display: flex) 在 IE11 中**整条规则块被静默丢弃**——它根本不识别 @supports 语法，连 fallback 都进不去。常见错误写法：
@supports (display: flex) {
.container { display: flex; }
}
.container { display: block; } /* 这行在 IE11 里根本不会执行 */
正确路径是「裸写降级，增强包裹」：
- 先写基础布局：
.container { display: -ms-flexbox; }（IE10/11 兼容） - 再叠加现代增强：
@supports (display: flex) { .container { display: flex; } } - 所有参与布局的元素，统一加
box-sizing: border-box，避免 IE 下 padding 导致宽度溢出
当 flex 嵌套+wrap+动态子项实在修不好时，该切什么方案
遇到多层 flex 容器嵌套、flex-wrap: wrap 配合 min-width、或子项数量不固定时，IE11 的 flex 引擎会频繁计算错误，强行兼容成本远高于替换。推荐两个落地方案：
-
display: table：父容器
display: table; width: 100%，子项display: table-cell; vertical-align: top，IE8+ 全兼容，性能比 flex 更稳 -
float + @supports not：用
@supports not (display: flex)包裹 float 规则，但注意——IE11 不识别该语法，所以必须把 float 规则写在@supports外层作为默认兜底
最易被忽略的一点：flex-direction: column 在 IE11 中遇上 min-height，子项 flex: 1 常不占满剩余空间，必须给父容器加 height: 100% 或 min-height: 1px 来触发 BFC。
