ie10/ie11中flex布局失效需手动添加私有前缀：ie10用-ms-flexbox及-ms-flex-*系列属性，ie11用-ms-justify-content/-ms-align-items等；flex: 1须拆解为三属性并加-ms-前缀；复杂场景可降级为display: table方案。
Flex在IE10/IE11中不生效的典型表现
页面在Chrome里正常换行、居中，IE里元素堆成一列或完全错位，控制台没报错但布局彻底失效。这不是代码写错了，而是IE对Flex的支持有断层：IE10只支持-ms-flexbox旧语法，IE11虽支持标准display: flex，但大量属性名和行为不一致——比如flex-wrap在IE11里必须写-ms-flex-wrap才生效，align-items的stretch值在IE中可能被忽略。
必须加的私有前缀与属性映射表
不能只靠Autoprefixer自动补全，它对IE10/IE11的覆盖不完整。以下几组必须手动补：
-
display: flex→ 同时写display: -ms-flexbox（IE10）和display: flex（IE11+） -
flex-direction: column→ 补-ms-flex-direction: column -
justify-content: center→ 补-ms-flex-pack: center（IE10）和-ms-justify-content: center（IE11） -
align-items: flex-start→ 补-ms-flex-align: start（IE10）和-ms-align-items: flex-start（IE11）
注意：-ms-flex-pack和-ms-flex-align是IE10专属，IE11已弃用；而-ms-justify-content和-ms-align-items是IE11新增但非标准，不加就失效。
IE10下flex: 1失效的替代写法
IE10根本不识别flex: 1缩写，直接当无效声明丢弃。必须拆成三部分并加前缀：
flex-grow: 1; flex-shrink: 1; flex-basis: 0%; /* IE10必需 */ -ms-flex-positive: 1; -ms-flex-negative: 1; -ms-flex-preferred-size: 0%;
漏掉任意一项，IE10里该元素就不会伸缩。更麻烦的是，IE10中flex-basis设为auto会导致计算错误，务必统一用0%或具体像素值。
当Flex真没法修时，用display: table兜底
某些复杂嵌套（比如多层flex + flex-wrap + 百分比子项），即使加满前缀在IE11里仍会塌陷。这时别硬刚，改用display: table方案更稳：
- 父容器设
display: table; width: 100% - 子项设
display: table-cell; vertical-align: top - 需要等宽？用
width: 33.333%配合box-sizing: border-box
这个方案在IE8+全兼容，且性能比Flex还高。唯一代价是丧失flex-wrap能力——如果业务真需要折行，那就得切回JS动态计算高度+float了。
最常被忽略的一点：IE11里flex-direction: column遇上min-height时，子元素的flex: 1经常不占满剩余空间，必须给父容器显式加height: 100%或min-height: 1px来触发BFC。这个细节连很多Polyfill都救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
