在IE10中如何让CSS3 flexbox盒模型正确识别flex-direction？-css教程-PHP中文网

IE10不支持flex-direction标准属性，必须用-ms-flex-direction且父容器设display: -ms-flexbox。它实现的是2012年旧草案，忽略flex-direction等新属性，退回到块级流渲染；正确写法需成对声明display: -ms-flexbox和-ms-flex-direction，避免混用新旧语法。

在ie10中如何让css3 flexbox盒模型正确识别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节点顺序。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

必须成对声明`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结构和视觉顺序，别信模拟器。