Menu
I am trying to make 2 elements display vertically. This is supposed to work, but on firefox 21 the elements show up horizontally.
Any one knows why and how to fix it?
<!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>
867
To center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. We use justify-content to align the item on the main axis, which in this case is the inline axis running horizontally.
align-items and justify-content are the important properties to absolutely center text horizontally and vertically. Horizontally centering is managed by the justify-content property and vertical centering by align-items.
CSS Demo: flex-directionIf its dir attribute is ltr , row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl , row represents the axis oriented from the right to the left, and row-reverse from the left to the right.
You are mixing syntaxes. You have enabled flexbox with the old syntax (which is what Firefox currently supports), but you try to make them vertical with the new syntax.
You need to use -moz-box-orient: vertical;
div {
width: 50%;
display: -moz-box;
-moz-box-orient: vertical;
}
http://jsfiddle.net/TPf3P/
Firefox will soon use the latest syntax (without prefix), so you should include that too. This syntax will also work in IE11, Opera, and Chrome (with -webkit- prefix in this case).
You should also add the old syntax with -webkit prefix, so that it works in Safari. IE10 also supports a slightly different syntax:
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/
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
