IE10不支持flex-direction标准属性，必须用-ms-flex-direction且父容器设display: -ms-flexbox。它实现的是2012年旧草案，忽略flex-direction等新属性，退回到块级流渲染；正确写法需成对声明display: -ms-flexbox和-ms-flex-direction，避免混用新旧语法。
IE10根本不识别flex-direction标准属性，必须用-ms-flex-direction，且前提是父容器声明display: -ms-flexbox——缺一不可。
为什么flex-direction: column在IE10里完全没反应
因为IE10实现的是2012年旧版Flexbox草案，它压根不解析flex-direction这个属性名。你写的那行CSS会被直接忽略，浏览器退回到普通块级流渲染。常见错误是只加前缀却不改display值，比如：
.container {
display: flex; /* IE10直接无视整条规则 */
flex-direction: column; /* 同样被无视 */
}正确做法是彻底切换语法体系：
-
display必须设为-ms-flexbox（不是-ms-flex，也不是和flex混写） -
flex-direction对应换成-ms-flex-direction - 值保持一致：
row/column等可直接沿用，但row-reverse和column-reverse在IE10中行为错乱，建议回避
-ms-flex-direction的可用值与陷阱
IE10支持row、column、row-reverse、column-reverse这四个值，但后两者实际表现极不稳定：
立即学习“前端免费学习笔记（深入）”；
-
row-reverse可能导致子元素DOM顺序与视觉顺序不一致，尤其当配合order使用时 -
column-reverse在某些嵌套场景下根本不会翻转，而是按row方向渲染 - 没有报错提示，只有布局异常——这是最危险的
如果业务必须反向排列，优先用order属性控制（IE10支持-ms-flex-order），或改用JS反转DOM节点顺序。
必须成对声明display和-ms-flex-direction
不能只写-ms-flex-direction而保留display: flex。IE10遇到不认识的display值会丢弃整个CSS规则块，导致后续所有Flex相关样式失效。正确写法是：
.container {
display: -ms-flexbox;
display: flex; /* 现代浏览器覆盖，IE10忽略这一行 */
-ms-flex-direction: column;
flex-direction: column;
}注意两点：
-
display: -ms-flexbox必须写在display: flex之前，否则IE10可能因解析失败跳过整段 - 不要在同一个选择器里混用新旧语法的其他属性（比如
justify-content和-ms-flex-pack可以共存，但flex: 1在IE10里会被当成flex: 0 0 auto，需单独处理）
真正麻烦的不是写不对，而是IE10不报错、不警告、不触发开发者工具的“无效属性”提示——它只是安静地按老方式渲染。上线前务必在真实IE10环境里测DOM结构和视觉顺序，别信模拟器。
