Flexbox在IE10–IE11需同时声明新旧两套语法（如display: -ms-flexbox/display: flex），仅加-ms-前缀无效；IE9及以下须用float/table-cell兜底，且兜底样式须写在前；autoprefixer无法自动转换-ms-flex-pack等旧属性值，需手动补全或借助postcss-flexbugs-fixes插件。
Flexbox在IE10–IE11中部分属性不生效，因为缺少厂商前缀
IE10–IE11支持的是旧版Flexbox语法（2012草案），而现代CSS使用的是2018标准语法。两者关键词完全不同，仅加-ms-前缀不够，必须成对提供两套声明。
常见失效场景：用justify-content: center水平居中，IE11里完全没反应；flex-wrap: wrap被忽略；flex: 1在IE10中解析为flex: 0 0 auto。
- 必须同时写
display: -ms-flexbox和display: flex -
justify-content对应-ms-flex-pack（center→center，space-between→distribute） -
align-items对应-ms-flex-align（stretch→stretch，center→center） -
flex-direction: column对应-ms-flex-direction: column
示例：
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}IE9及更早版本根本不支持Flexbox，需用float或table-cell兜底
IE9及以下连-ms-flexbox都不认，此时不能依赖任何Flex相关声明。必须用兼容性更强的布局模型，并确保结构语义不变。
立即学习“前端免费学习笔记（深入）”；
关键原则：兜底样式要写在Flex样式之前，让支持Flex的浏览器覆盖掉旧规则；否则IE9会把display: flex整个声明块忽略，但保留前面的float导致错乱。
- 优先用
display: table-cell+vertical-align: middle实现垂直居中（需父容器display: table） - 水平居中可用
text-align: center+inline-block子元素，或margin: 0 auto配合固定宽 - 避免在IE9兜底中使用
calc()、vw/vh等现代单位
示例（三栏等宽布局）：
.grid {
*zoom: 1; /* 触发IE6–7 hasLayout */
}
.grid:before,
.grid:after {
content: "";
display: table;
}
.grid:after { clear: both; }
.grid > div {
float: left;
width: 33.333%;
}
@supports (display: flex) {
.grid {
display: flex;
}
.grid > div {
float: none;
flex: 1;
}
}autoprefixer无法自动补全所有IE旧语法，特别是-ms-flex-*值映射
autoprefixer默认只加前缀，不转换属性名或值。比如它会给justify-content加-webkit-和-ms-，但-ms-flex-pack: center不会自动生成——因为IE10–11用的是不同语义体系。
这意味着：仅靠autoprefixer + browserslist配置IE 10，仍会出现布局错位。
- 检查输出CSS是否真包含
-ms-flex-pack等旧属性，不能只看有没有-ms-前缀 - 推荐手动补全关键旧语法，或使用插件如
postcss-flexbugs-fixes（它会处理flex: 1在IE下的展开、min-width: 0缺失等问题） - 避免依赖
flex: 0 1 auto这类简写——IE10会错误解析第二、三个参数，建议拆成flex-grow/flex-shrink/flex-basis单独写
Flex容器子项的min-width: 0在IE中常被忽略，导致换行失效
这是IE Flex最隐蔽的坑：当子项含长文本或内联元素时，IE10–11默认不收缩，flex-wrap: wrap形同虚设。现代浏览器中min-width: 0可破，但IE需要额外干预。
根本原因：IE未实现CSS Sizing Level 3中的min-width: auto行为，且对min-width: 0支持不稳定。
- 对可能溢出的子项，显式加
min-width: 0+_width: 0（下划线写法仅IE6–8识别，不影响现代浏览器） - 更可靠的做法是加
-ms-word-break: break-all或word-break: break-word控制文本 - 若子项是
img或iframe，需加max-width: 100%并确保父容器有明确宽度
这问题往往只在真实数据（非Lorem Ipsum）下暴露，测试时容易漏掉。
