IE10的Flex布局完全不兼容标准语法，必须使用-ms-flexbox前缀且与display:flex共存、顺序正确；align-items需改为-ms-flex-align并调整取值；flex-wrap无效，需回退流式布局；@supports不可用，须用条件注释或JS检测降级。
IE10 的 Flex 布局不是“部分失效”，而是整套语法体系不兼容——直接写 display: flex 或 align-items: center 就等于没写，必须用旧草案语法 + 私有前缀双保险才能跑起来。
必须同时声明 display: -ms-flexbox 和 display: flex
只写其中任意一个都会失败：IE10 完全忽略 display: flex，而现代浏览器会跳过带 -ms- 前缀的声明。二者必须共存，且顺序不能错：
display: -ms-flexbox; display: flex;
如果顺序反了（比如 display: flex; display: -ms-flexbox;），IE10 可能降级为 display: block 渲染，整个布局塌掉。
align-items 要换成 -ms-flex-align，值也得改
align-items: center 在 IE10 里是无效字符串，必须写成 -ms-flex-align: center；但注意：flex-start 和 stretch 这类值不能直译：
立即学习“前端免费学习笔记（深入）”；
-
align-items: flex-start→ 改用-ms-flex-align: start（写flex-start会被静默丢弃） -
align-items: stretch→ 虽然-ms-flex-align: stretch存在，但在嵌套 flex 容器中高度计算常出错，建议显式设子项height或min-height - 列方向（
flex-direction: column）下还必须加max-width: 100%防止子项横向溢出
flex-wrap 在 IE10/11 里完全不存在
无论加不加 -ms-flex-wrap: wrap，IE10 都不会换行——这个属性它压根没实现。替代方案只能退回到流式布局：
- 父容器设
font-size: 0消除inline-block间隙 - 子项用
display: inline-block+width: calc(33.333% - 2px)控制换行位置 - 避免写死
width: 33%，IE 对小数百分比四舍五入更敏感，容易多出 0.01px 导致意外折行 - 子项若有
padding或border，必须在calc()中一并减去，否则宽度失控
别指望 @supports 自动降级
IE10 不支持 @supports，所以不能靠它做渐进增强。真要兜底，得用条件注释或 JS 检测：
<!--[if IE 10]> <link rel="stylesheet" href="ie10-flex-fix.css"> <![endif]-->
或者用 JS 判断 document.documentMode === 10 后动态加载兼容样式。最麻烦但最稳的方式是：所有 Flex 布局先按现代语法写，再单独维护一份 IE10 专用 CSS，里面把 flex 全替换成 table 或 float 方案——比如用 display: table-cell 模拟等宽分布，用 position: absolute + transform: translate(-50%, -50%) 模拟垂直居中（IE9+ 支持）。
