ie11仅支持2012年旧版flex规范，必须使用-ms-前缀：display: -ms-flexbox；-ms-flex-direction、-ms-flex-wrap、-ms-flex-align、-ms-flex-pack等属性需对应替换，且值名不同（如flex-start→start、space-evenly不支持）；常见坑包括flex:1导致高度塌陷、flex-basis:auto计算异常、嵌套column时height失效，须配合min-height:0等显式约束，并手写双声明+真实环境反复测试。
IE11 对 Flex 布局支持不完整，直接写 display: flex 会出问题——不是不能用，而是必须加前缀、避开已知 bug、且不能依赖现代语法。
哪些 Flex 属性在 IE11 中必须加 -ms- 前缀
IE11 实现的是旧版 Flex 规范（2012 年草案），所有核心属性都要带 -ms- 前缀，且值名不同：
-
display: -ms-flexbox（不是flex） -
-ms-flex-direction替代flex-direction（row/column值相同，但row-reverse在 IE11 中有渲染错位风险） -
-ms-flex-wrap替代flex-wrap（wrap可用，wrap-reverse完全不生效） -
-ms-flex-align对应align-items（center、stretch可用；flex-start要写成start） -
-ms-flex-pack对应justify-content（center、space-between可用；space-evenly不支持）
IE11 中最常踩的三个 Flex 坑
这些不是“不兼容”，而是表现诡异，调试时容易误判为 CSS 写错：
-
flex: 1在 IE11 中等价于-ms-flex: 1 1 auto，但若父容器没设height，子项高度可能塌陷——必须显式设min-height: 0或height: 0防止收缩过度 -
flex-basis: auto在 IE11 下计算逻辑异常，尤其配合width使用时；建议统一用具体值（如flex-basis: 200px）或改用-ms-flex-preferred-size - 嵌套 Flex 容器中，若内层用了
flex-direction: column，IE11 可能忽略其子项的height设置——解决办法是给该子项加min-height: 0或max-height: none
如何安全地写一份 IE11 + 现代浏览器共存的 Flex 样式
不要靠 Autoprefixer 全包——它生成的前缀在 IE11 中仍可能触发 bug。推荐手写双声明 + 条件性降级：
header {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
nav > a {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
/* IE11 下避免文字撑宽导致换行异常，加 white-space: nowrap */
white-space: nowrap;
}
- 始终把
-ms-声明写在标准声明之前（CSS 会覆盖） - 对关键布局节点（如导航栏、卡片列表），额外加
@supports not (display: flex) { ... }回退规则（IE11 不识别@supports，所以不影响） - 避免在 IE11 场景中使用
gap、flex-flow、align-content——这些在 IE11 中无效或行为不可控
真正麻烦的不是写法，而是 IE11 的 Flex 引擎对盒模型计算和重排特别敏感——哪怕只是多一个空格、少一个 min-height，都可能导致整行错位或高度归零。上线前务必在真实 IE11 环境里用鼠标拖动窗口反复缩放测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
