我正在尝试使 2 个元素垂直显示。这应该可以工作，但在 Firefox 21 上，元素水平显示。
任何人都知道为什么以及如何解决它？
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 50%;
display: -moz-box;
-moz-flex-direction: column;
}
#p1
{
border:1px solid red;
}
#p2
{
border:1px solid blue;
}
</style>
</head>
<body>
<div>
<div id="p1">item1</div>
<div id="p2">item2</div>
</div>
</body>
</html>
您正在混合语法。您已经使用旧语法（这是 Firefox 当前支持的）启用了 flexbox，但您尝试使用新语法使它们垂直。
你需要使用-moz-box-orient: vertical;
div {
width: 50%;
display: -moz-box;
-moz-box-orient: vertical;
}
Firefox 很快就会使用最新的语法（不带前缀），所以你也应该包含它。此语法也适用于 IE11、Opera 和 Chrome（在这种情况下带有 -webkit- 前缀）。
您还应该添加带有 -webkit 前缀的旧语法，以便它在 Safari 中工作。IE10 还支持稍微不同的语法：
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;