IE9及更早版本完全不支持Flex布局，IE10–IE11仅支持带-ms-前缀的旧语法且存在诸多Bug；需分别处理display、flex-direction、justify-content等属性的兼容写法，并彻底移除float/vertical-align；IE9只能降级使用float/table/inline-block等传统方案。
IE9 及更早版本完全不支持 Flex 布局，连 display: flex 都会被忽略；IE10–IE11 支持但存在大量语法差异和渲染 Bug，不能直接照搬现代写法。
IE10–IE11 的 flex 语法必须用旧版前缀
IE10 使用的是 2012 年草案（display: -ms-flexbox），IE11 虽然支持无前缀 display: flex，但很多属性仍需 -ms- 前缀才能生效。比如：
-
flex-direction在 IE10/11 中要写成-ms-flex-direction -
justify-content对应-ms-flex-pack（IE10）或-ms-flex-pack/-ms-justify-content（IE11 行为不一致） -
align-items对应-ms-flex-align -
flex: 1必须拆成-ms-flex: 1，否则在 IE10 下无效
只加 display: flex 而不补全前缀属性，布局大概率会塌陷或错位。
flex 容器子元素的 float / vertical-align 会失效
这是现代 Flex 的标准行为，但在兼容处理时容易被忽略：一旦父容器设为 display: flex（或 -ms-flexbox），所有直系子元素的 float、clear、vertical-align 属性都会被强制忽略。
立即学习“前端免费学习笔记（深入）”；
- 如果你的旧代码依赖
float: left实现横向排列，切换 flex 后必须改用flex-direction: row+flex-wrap - 依赖
vertical-align: middle垂直居中的行内元素，在 flex 容器里得改用align-items: center（或 IE 下的-ms-flex-align: center） - 混用 float 和 flex 极易导致布局不可预测，建议一次性清理相关样式
IE9 及以下只能降级为 float / table / inline-block
没有取巧办法。IE9 不识别 display: flex，也不支持 -ms-flexbox（那是 IE10 才引入的）。常见兜底方案有：
- 用
display: table-cell+vertical-align: middle模拟垂直居中（但高度需固定） - 用
float: left+margin或calc()控制宽度（响应式受限） - 用
display: inline-block+font-size: 0清除间隙（兼容性好，但换行逻辑难控） - 借助条件注释或 JS 检测 UA，对 IE9 单独加载一套传统布局 CSS
别试图用 Autoprefixer 或 PostCSS “自动修复” IE9 —— 它们只加前缀，不替换语法，对 IE9 无效。
真正麻烦的不是写两套样式，而是交叉轴对齐、flex 项目顺序重排、flex-wrap 换行后的行为差异——这些在 IE10–11 中表现不一，必须逐项测试，不能只看主轴效果。
