ie11只识别display: -ms-flexbox（2012草案），单写display: flex会被完全忽略；必须同时声明display: -ms-flexbox和display: flex，并手动映射-ms-flex-pack、-ms-flex-align等属性及对应值，autoprefixer无法自动生成。
IE11 的 display: flex 不是“部分支持”，而是“只认旧草案”——单写标准语法等于没写，必须显式提供两套声明，且关键属性值要一一映射。靠 autoprefixer 或 CSS 预处理器自动补前缀根本不够用。
为什么 display: flex 在 IE11 里完全不生效
IE11 解析 CSS 时会跳过不认识的声明，而它只识别 display: -ms-flexbox（2012 年草案），对 display: flex 视而不见。这不是加载慢或渲染延迟，是样式直接被丢弃。
-
display: flex单独出现 → IE11 忽略整条规则，回退到display: block -
display: -ms-flexbox和display: flex同时存在 → IE11 执行前者，现代浏览器执行后者 - 顺序无关紧要，但
-ms-声明必须显式写出，autoprefixer 不生成它 - 如果父容器用了
flex-direction: column，子项又设了height: 100%，IE11 会彻底塌缩——因为交叉轴尺寸未锚定
justify-content / align-items 在 IE11 中失效的真相
IE11 不支持 justify-content 和 align-items 这些标准名，它只认 -ms-flex-pack 和 -ms-flex-align，而且值也不一样：
-
justify-content: space-between→ 必须配-ms-flex-pack: distribute（不是space-between） -
justify-content: center→ 对应-ms-flex-pack: center -
align-items: center→ 要写-ms-flex-align: center，且父容器必须有明确高度（height: 1px都行） -
align-items: stretch在 IE11 中极不可靠，建议统一用min-height: 0+flex-shrink: 0替代
flex: 1 导致子项挤成一排、文字溢出的根本原因
IE11 把 flex: 1 解析为 flex: 1 1 0%，那个 0% 让浏览器失去换行依据，flex-wrap: wrap 形同虚设。
- 禁用
flex: 1、flex: 1 1 auto，它们在 IE11 中都退化为无效值 - 三栏布局写
flex: 0 0 33.333%，小数点不能省（33%可能被截断为0） - 配套加
box-sizing: border-box，否则 padding/border 会让实际宽度超限 - 文字省略
text-overflow: ellipsis在 Flex 子项中必失效，得包一层<div>，内层设 <code>width: 100%+white-space: nowrap+overflow: hidden@supports 回退不是万能的，IE11 根本不进这个块
@supports (display: flex)在 IE11 中会被整个忽略——它连语法都不认识，自然不会执行里面任何样式。所以兜底逻辑必须写在@supports外层，且放在标准声明之前。- 正确结构：
display: -ms-flexbox; display: flex; @supports (place-items: center) { display: flex; place-items: center; } - IE11 只执行前两行，现代浏览器覆盖后两行
- 别把
-ms-声明塞进@supports，它不会生效，还可能干扰构建工具 - 响应式断点里
flex-basis不会重算，每个媒体查询都必须显式重写，比如@media (max-width: 768px) { .item { flex-basis: 100%; } }
最易被忽略的是：IE11 对“无约束主轴”的处理极其保守——哪怕你写了
min-height: 100vh，只要父容器没有显式height，flex: 0 0 50%的子项仍可能塌成一条线。这时候不是代码漏了前缀，而是渲染引擎压根没触发弹性计算。 - 正确结构：
