ie10 flex需双声明：display: -ms-flexbox 必须在前，display: flex 在后；justify-content/align-items 要换为 -ms-flex-pack/-ms-flex-align 并调整值；flex 缩写必须拆解为 -ms-flex-positive/-negative/-preferred-size；无高度约束时 flex: 1 子项会塌缩。
IE10 的 Flex 布局不是“兼容性差”，而是整套语法体系不互通——直接写 display: flex 就等于没写，必须用 -ms-flexbox 旧草案语法双保险才能启动 Flex 上下文。
必须同时声明 display: -ms-flexbox 和 display: flex，且顺序不能错
IE10 完全忽略 display: flex，现代浏览器则跳过带 -ms- 的声明。二者缺一不可，且顺序固定：
-
display: -ms-flexbox必须在前，这是 IE10 启动 Flex 渲染的唯一入口 -
display: flex紧跟其后，供其他浏览器使用 - 如果写成
display: flex; display: -ms-flexbox;，IE10 可能降级为display: block，整个容器塌陷 - 不要混入
display: box或display: -webkit-box，IE10 不识别
justify-content 和 align-items 在 IE10 中必须换名+改值
IE10 没有 justify-content 和 align-items 这两个属性，对应的是 -ms-flex-pack 和 -ms-flex-align，且可选值不同：
-
justify-content: center→-ms-flex-pack: center（别写flex-center） -
justify-content: space-between→-ms-flex-pack: justify（space-around不支持） -
align-items: center→-ms-flex-align: center -
align-items: flex-start→-ms-flex-align: start（写flex-start会被静默丢弃） -
align-items: stretch虽然可用，但在嵌套 Flex 容器中高度计算不稳定，建议显式设height或min-height
flex 缩写在 IE10 中完全失效，必须拆解为三值并加前缀
IE10 把 flex: 1 解析为 flex: 1 1 auto，但它既不支持三值语法，又把 auto 当作 0px 处理，结果子项宽度归零：
- 必须写全：
-ms-flex-positive: 1、-ms-flex-negative: 1、-ms-flex-preferred-size: 0% - 禁用
flex-basis: auto，统一用0%或具体像素值（如33.33%） -
!important对-ms-flex-preferred-size无效，漏掉它就等于设了0px - 哪怕只写
-ms-flex: 1，IE10 也会按-ms-flex: 1 1 0%解析，但行为仍不可靠，不如手动拆解
当 -ms-flexbox 仍错位时，display: table 是更稳的降级方案
多层嵌套 + flex-wrap + 百分比子项的组合，在 IE10 中即使补全所有 -ms- 属性也常出错。此时硬调前缀不如换模型：
- 父容器设
display: table; width: 100% - 子项设
display: table-cell; vertical-align: top - 等宽布局用
width: 33.333%+box-sizing: border-box - 该方案兼容 IE8+，性能优于 Flex，且无渲染抖动
- 代价是失去
flex-wrap能力；若业务强依赖折行，就得切回 JS 动态计算高度 +float
最易被忽略的一点：IE10/11 中，Flex 容器自身若没有明确高度约束（height 或 min-height），flex: 1 子项大概率会塌缩为 0 高度——这不是前缀问题，是你没给它“撑开”的依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
