ie10 不支持 align-items，需用 -ms-flex-align；display 必须同时声明 -ms-flexbox 和 flex 且前者在前；column 方向下需加 max-width:100% 防溢出；text-align:center 不可省略。
align-items: center 在 IE10 里根本没生效，不是写错了，是语法不认
IE10 完全不识别 align-items 这个标准属性，写了等于白写。它只认私有版本 -ms-flex-align，而且可选值还少、拼写不同——比如 center 可以用，但 flex-start 或 stretch 在某些嵌套下会静默失效，最终按默认 start 渲染，看起来像“居中没反应”，其实是被丢弃了。
常见错误现象包括：Chrome 里子项垂直居中正常，IE10 里全部顶边贴齐；或部分子项居中、部分偏移，尤其在 flex-direction: column 下更明显。
-
align-items: center→ 必须补-ms-flex-align: center -
align-items: flex-start→ 不能写-ms-flex-align: flex-start（IE10 直接忽略），得改用-ms-flex-align: start -
align-items: stretch虽然存在，但在多层嵌套 flex 容器中容易计算错高度，建议显式设子项height或min-height
display: flex 和 -ms-flexbox 必须同时声明，顺序不能错
只写 display: flex，IE10 当成无效声明；只写 display: -ms-flexbox，现代浏览器可能误触发怪异模式。二者必须共存，且 -ms-flexbox 得放在前面：
display: -ms-flexbox;<br>display: flex;
原因：IE10 解析 CSS 时遇到不认识的声明会跳过，但保留已识别的；现代浏览器则忽略带前缀的旧语法，只执行标准版。如果顺序反了，IE10 可能因后续声明干扰而降级为 block 渲染。
注意：-ms-flexbox 是 IE10 专属，IE11 已支持标准 display: flex，但仍有大量属性需额外加 -ms- 前缀（如 -ms-flex-pack），不能指望一个声明打天下。
flex-direction: column + align-items: center 导致子项横向溢出
这是 IE10 典型 Flexbug #2：列方向容器中启用 align-items: center 后，子元素宽度不再受父容器约束，文字或图片直接撑破边界。
根本原因是 IE10 对交叉轴（此时是水平方向）的尺寸收缩逻辑有缺陷，不会自动限制子项最大宽度。
- 必须给所有子项加
max-width: 100% - 配套加上
box-sizing: border-box，避免 padding/border 加在 width 外导致二次溢出 - 若子项含图片，IE10 对
img的 intrinsic 尺寸处理异常，建议包一层<div> 再设 <code>max-widthtext-align: center 和 align-items: center 不是替代关系，缺一不可
align-items: center（或 IE10 的-ms-flex-align: center）只控制子元素整体在交叉轴上的位置，不控制子元素内部文字对齐。如果子项是个<div>标题</div>，光靠它，文字仍左对齐。要让文字真正居中，得在子项上加
text-align: center：.flex-item {<br> -ms-flex-align: center;<br> align-items: center;<br> text-align: center;<br>}容易踩的坑：
- 子项是
<span></span>等行内元素？先加display: block或inline-block，否则text-align无效 - 子项没设宽度？
text-align: center在无宽块级元素里效果不可见，需配合width或max-width - 单行文字想水平+垂直居中？Flex 容器设
justify-content: center+-ms-flex-pack: center，子项加text-align: center即可，不用再套内层 flex
最麻烦的是，这些规则在 IE10 里不是“不工作”，而是“看似工作、实则漏掉一两个环节”，最后布局错位却找不到报错，得逐层检查子项的
max-width、box-sizing、text-align是否都到位。 - 子项是
