如何让Flex项目垂直而不是水平显示？

我想让2个元素垂直显示。这应该是工作，但在Firefox 21的元素水平显示。如何让Flex项目垂直而不是水平显示？

任何人都知道为什么以及如何解决它？

<!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>

来源

2013-05-31 Steve H

您在混合语法。您已经使用旧的语法来启用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/

来源

2013-05-31 06:02:19

哇，我花了时间来跟踪每一个浏览器'柔性direction'支持。谢谢，这完美地工作。 – JacobTheDev

为什么没有使用box-orient：vertical;？ – confile

谢谢！您也可以使用[autoprefixer]（https://github.com/postcss/autoprefixer）。 –

如何让Flex项目垂直而不是水平显示？

回答

相关问题