ie10–ie11必须手动添加-ms-前缀的属性包括：display: -ms-flexbox、-ms-flex-direction、-ms-flex-wrap、-ms-flex-pack、-ms-flex-align、-ms-flex-order；flex简写不被识别，需用-ms-flex替代，且align-self在ie10不可用。
Flexbox 在现代浏览器中基本无兼容问题，但 IE10–IE11 仍需手动加前缀，且部分属性行为不一致——不加前缀或乱用 display: flex 声明，会导致 IE 下完全失效或错位。
IE10–IE11 必须加 -ms- 前缀的属性有哪些
IE10–IE11 实现的是旧版 Flexbox（2012 年草案），与标准 W3C 版本不兼容。以下属性必须显式添加 -ms- 前缀，否则无效：
-
display: -ms-flexbox（而非display: flex） -
-ms-flex-direction（对应flex-direction） -
-ms-flex-wrap（对应flex-wrap） -
-ms-flex-pack（对应justify-content） -
-ms-flex-align（对应align-items） -
-ms-flex-order（对应order，仅支持整数）
注意：flex: 1 这类简写在 IE 中不被识别，必须拆成 -ms-flex: 1；align-self 在 IE10 中不可用，IE11 才支持 -ms-flex-item-align。
如何安全地同时支持 Chrome/Firefox/Safari 和 IE11
推荐采用「双声明 + 条件覆盖」写法：先写标准属性，再紧跟着写 IE 兼容声明。CSS 解析器会忽略无法识别的属性，但 IE11 能识别 -ms- 前缀并优先应用它。
header {
display: flex;
display: -ms-flexbox;
justify-content: space-between;
-ms-flex-pack: justify;
align-items: center;
-ms-flex-align: center;
}
关键点：
- 不要只写
-ms-flexbox而漏掉标准flex，否则现代浏览器会降级为 block -
-ms-flex-pack的值是start/end/justify/distribute，不是flex-start等标准值 - IE11 对
flex-grow/flex-shrink支持极差，建议统一用-ms-flex: 0 0 auto控制尺寸
哪些 Flexbox 功能在 IE 中根本不能用
即使加了前缀，以下特性在 IE10–IE11 中仍缺失或存在严重 bug：
-
flex-basis: max-content/min-content—— IE 完全忽略，只能用像素或百分比 -
gap属性 —— IE 无任何等效方案，需改用margin模拟 - 嵌套 Flex 容器中子项的
align-self: flex-start在 IE10 中常失效 -
flex-flow: row wrap简写在 IE 中不生效，必须拆成两行声明
若项目必须支持 IE10，建议对关键布局区域做降级处理（如用 float 或 inline-block 备用样式），而不是强行塞满前缀。
要不要用 Autoprefixer？怎么配才不翻车
Autoprefixer 默认开启 IE10+ 支持，但默认**不输出 -ms-flexbox** —— 因为它的目标是「现代语法转前缀」，而 IE 的旧语法是另一套模型。所以单纯开 Autoprefixer 不解决 IE 兼容问题。
正确做法：
- 保留手写
display: -ms-flexbox及配套属性（Autoprefixer 不动它们） - 对标准属性（如
flex-direction）启用 Autoprefixer，它会补-webkit-（Safari 8–9）等，但不会碰 IE - 在
browserslist中明确写"ie >= 10"，并配合插件postcss-flexbugs-fixes修复已知渲染 bug
一个容易被忽略的细节：PostCSS 配置里如果用了 flexbox: 'no-2009'，会禁用所有旧语法输出——这会让 IE 直接失去 Flex 支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
