ie11中display:flex不生效是因为其仅识别2012年草案的display:-ms-flexbox，对无前缀语法仅作语法兼容而不触发布局引擎；必须双写且-ms-flexbox在前，否则退化为block。
IE11 的 Flex 布局必须同时写 display: -ms-flexbox 和 display: flex，且所有关键属性都要配 -ms- 前缀——只写标准语法等于没写。
为什么 display: flex 在 IE11 里完全不生效？
IE11 内置的 Flex 实现基于 2012 年草案，它识别 display: -ms-flexbox，但对无前缀的 display: flex 仅作“语法兼容”，不触发实际布局引擎。单独写 display: flex 会被跳过，容器退化为 display: block。
- 必须按顺序声明：
display: -ms-flexbox放在display: flex前面（IE11 只认第一个它能解析的值） -
-ms-flexbox是 IE10/IE11 共用的基础容器声明，不可省略 - 哪怕只支持 IE11，也要双写——因为某些企业内网环境仍运行 IE10 内核模式
justify-content 和 align-items 怎么写才真正起作用？
IE11 对齐属性名和行为都和标准不一致：justify-content 要靠 -ms-flex-pack，align-items 必须用 -ms-flex-align；-ms-justify-content 和 -ms-align-items 虽然存在，但部分版本下不稳定，优先用前者。
-
-ms-flex-pack: center→ 等效于justify-content: center -
-ms-flex-align: center→ 等效于align-items: center - 若需单个子项居中，不能只靠
align-self，要写-ms-flex-item-align: center - 父容器必须有明确高度（哪怕
height: 1px），否则-ms-flex-align: center在 column 方向可能失效
flex: 1 为什么在 IE11 里子项挤成一排或塌缩？
IE11 解析 flex: 1 为 flex: 1 1 0%，而 0% 会压制换行判断，导致 flex-wrap: wrap 失效；更糟的是，它不支持三值语法中的 auto，直接忽略整条声明。
- 别用
flex: 1，改写为-ms-flex: 1+flex: 1 - 若需换行，子项必须设显式
flex-basis，比如三栏就写flex-basis: 33.333%，并补-ms-flex-preferred-size: 33.333% - 避免
flex-basis: auto，IE11 会把它当0处理，造成宽度计算错误 - 文字溢出常见于未加
white-space: nowrap的导航链接，尤其在-ms-flexbox下
哪些地方最容易被忽略，却直接导致布局崩溃？
不是前缀漏没漏的问题，而是 IE11 渲染链里几个硬性前提：容器高度未锚定、子项带 height 或 max-height、gap 被静默丢弃还试图用 padding 补救——这些都会让整个 Flex 流程卡死。
- 父容器没设
height或min-height，-ms-flex: 1子项可能高为 0 - 子项写了
height: 40px，-ms-flex-align: stretch就完全失效 -
gap在 IE11 中解析阶段即被丢弃，加-ms-gap或padding都无效，必须用margin+@supports not (gap: 0)降级 - 响应式断点里，IE11 不重算已渲染的
flex-basis，每个媒体查询都得显式重写该值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
