IE11需同时声明display: -ms-flexbox和display: flex（前者在前），flex-wrap、align-items等属性须配-ms-前缀，且-ms-flex-align/-ms-flex-item-align逻辑与标准相反，flex-basis推荐设为0避免尺寸错误。
IE11 flex布局不生效，display: flex完全被忽略
这是最典型的症状：CSS写了display: flex，但子元素仍垂直堆叠、不换行、justify-content无效。根本原因不是IE11不支持flex，而是它只支持2012年旧版Flexbox语法（display: -ms-flexbox），且对现代写法极其敏感。
必须同时声明两套display值，且-ms-前缀版本要放在前面：
div.container {
display: -ms-flexbox;
display: flex;
}
漏掉-ms-flexbox或顺序颠倒，IE11就直接弃用整条规则。另外，IE11不识别flex: 1简写，必须拆成-ms-flex: 1和flex: 1。
flex-wrap: wrap在IE11下失效或换行错乱
IE11的-ms-flex-wrap只接受wrap和nowrap，不支持wrap-reverse；更关键的是，它对父容器宽度计算极不稳定——只要父容器没设明确width或max-width，子项可能全部挤在一行溢出，或莫名其妙断行。
立即学习“前端免费学习笔记（深入）”；
- 给flex容器加
width: 100%或max-width: 100%（哪怕父级是auto） - 避免用
%单位设置子项flex-basis，改用px或em -
-ms-flex-wrap: wrap必须和flex-wrap: wrap并存，且前者在前
IE11中align-items和align-self不居中
IE11对交叉轴对齐的支持有严重缺陷：align-items: center常失效，align-self几乎无效。这不是bug，是它把-ms-flex-align和-ms-flex-item-align设计成了独立控制逻辑，且默认值与标准不同。
正确写法：
.container {
-ms-flex-align: center;
align-items: center;
}
.item {
-ms-flex-item-align: center;
align-self: center;
}
注意：-ms-flex-align控制容器内所有子项，-ms-flex-item-align才作用于单个子项——这点和标准属性命名逻辑相反，极易混淆。
IE11 flex子项margin塌陷或尺寸计算错误
IE11会错误地将子项的margin计入flex基础尺寸（flex-basis），导致实际宽度超出预期，尤其在flex: 1场景下明显。它还对auto margin支持极差，margin: auto无法实现居中。
- 避免在flex子项上用
margin: auto，改用margin-left: auto; margin-right: auto（仅部分生效） - 显式设置
flex-basis: 0（对应-ms-flex-preferred-size: 0），再靠flex-grow分配空间 - 慎用
margin百分比，IE11按父容器宽度而非flex容器宽度计算
IE11的flex实现本质是“模拟”，不是重写渲染引擎。所有修复都绕不开前缀和双写，而最常被忽略的，是-ms-属性的优先级和触发条件——它不光看是否声明，还看声明顺序、父容器约束、甚至兄弟节点是否存在float。
