如何使弹性项目垂直而不是水平显示？答案

【问题标题】：How to make flex items display vertically instead of horizontally?如何使弹性项目垂直而不是水平显示？
【发布时间】：2013-05-26 20:16:12
【问题描述】：

我正在尝试使 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>

【问题讨论】：

标签： html flexbox

【解决方案1】：

您正在混合语法。您使用旧语法（这是 Firefox 当前支持的）启用了 flexbox，但您尝试使用新语法使它们垂直。

你需要使用-moz-box-orient: vertical;

div {
    width: 50%;
    display: -moz-box;
    -moz-box-orient: vertical;
}

http://jsfiddle.net/TPf3P/

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;

http://jsfiddle.net/TPf3P/1/

【讨论】：

哇，我花了好几个小时才找到flex-direction 对每个浏览器的支持。谢谢，这很好用。
你为什么不使用 box-orient: vertical;？
谢谢！你也可以使用autoprefixer。