如何使flex项目垂直显示而不是水平显示？

Question

如何使flex项目垂直显示而不是水平显示？

14

我想让两个元素垂直显示。虽然这应该有效，但在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>

- Steve H

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Storey · Accepted Answer

您将语法混淆了。您已经启用了旧语法的 flexbox（这是 Firefox 目前支持的），但您尝试使用新语法使它们垂直对齐。

您需要使用 -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/