ie10仅支持display:-ms-flexbox，必须前置且不可省略；-ms-flex-pack/-ms-flex-align替代justify-content/align-items；flex需拆解为-ms-flex三值（禁用auto）；错位时建议降级为display:table方案。
IE10 不支持 display: flex，只认 display: -ms-flexbox 这套独立语法体系——加前缀不是“锦上添花”，而是启用 Flex 上下文的必要条件。漏掉它，容器就退化成普通块级元素，所有子项对齐、伸缩行为全部失效，且控制台不报错，排查时极易误判为逻辑问题。
必须写全的 IE10 专用声明顺序
IE10 的解析器对声明顺序敏感，display: -ms-flexbox 必须放在 display: flex 前面，否则现代浏览器可能因层叠冲突失效：
-
display: -ms-flexbox是唯一能触发 IE10 Flex 上下文的声明，不可省略 -
display: flex紧跟其后，供其他浏览器使用 - 不要混用
display: box或display: -webkit-box，IE10 完全不识别 - 同一选择器中避免重复写
display多次，CSS 层叠可能引发不可控覆盖
-ms-flex-pack 和 -ms-flex-align 替代 justify-content / align-items
IE10 没有 justify-content 和 align-items，对应属性名和可选值都不同，拼错即失效（不会 fallback，而是按默认 start 渲染）：
-
-ms-flex-pack: start≈justify-content: flex-start（别写flex-start） -
-ms-flex-pack: justify≈justify-content: space-between（space-around不支持） -
-ms-flex-align: center≈align-items: center（stretch在嵌套场景下不稳定，慎用） - 禁止写
-ms-flex-align: flex-start或-ms-flex-pack: flex-end，IE10 直接丢弃整条声明
flex 缩写必须拆解，-ms-flex 不支持三值写法
flex: 1、flex: 0 1 auto 在 IE10 中完全无效，必须手动拆解并加前缀：
-
flex: 0 0 33.33%→ 对应写-ms-flex: 0 0 33.33%（IE10 支持三值，但仅限 px/%/em，不认auto或content） -
flex-basis设为auto会导致 IE10 按0px计算，项目塌陷；统一用0%或具体像素值更稳 - 漏掉
-ms-flex-preferred-size（即第三值）等同于设为0px，哪怕写了-ms-flex-positive和-ms-flex-negative也无济于事 -
!important在 IE10 下对-ms-flex第三个参数无效，需单独补-ms-flex-preferred-size: 0%
当 -ms-flexbox 仍错位时，用 display: table 降级更可靠
某些组合（如多层嵌套 + flex-wrap: wrap + 百分比子项）即使补全所有 -ms- 属性，在 IE10 中依然会错位或塌陷。此时硬调前缀不如换方案：
- 父容器设
display: table; width: 100% - 子项设
display: table-cell; vertical-align: top - 等宽需求用
width: 33.333%+box-sizing: border-box - 该方案兼容 IE8+，性能优于 Flex，且无
flex-wrap行为差异带来的隐患
真正麻烦的不是写多少前缀，而是 IE10 对 flex-basis 的解析逻辑和现代标准完全不同——它不走 CSS 尺寸计算链，而是直接截断取值。哪怕你把所有属性都写对了，只要其中一项用了 auto 或单位缺失，整个伸缩行为就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
