CODEWITHSUNDEEP
htmlflexbox
Steve H
Steve H

Reputation: 929

How to make flex items display vertically instead of horizontally?

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>

Upvotes: 14

Views: 17159

Answers (1)

David Storey
David Storey

Reputation: 30394

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/

Upvotes: 14

Related Questions