How do I implement a multi-line flexbox?

Question

Despite my Googling, I've found few examples on how to implement multiple line flexboxes. None of the code I've gotten from examples has worked. I have three elements inside a flexbox and I want the first to be on top and the second and third to be on the bottom row.

<div class="flexbox">   <div id="element1">element 1</div>   <div id="element2">element 2</div>   <div id="element3">element 3</div> </div> 

I've tried using these properties:

.flexbox {   width: 300px;   display: box;   display: -webkit-box;   display: -moz-box;   box-lines: multiple;   flex-wrap: wrap; }  #element1 {   width: 100%; } 

and giving it a set width but it still won't wrap, even if the first element has a width of 100%. Am I missing certain vendor prefixes or is my syntax wrong?

Answer 1

The flex box spec has changed in the last few months and you are using the old syntax. The new spec I believe is only currently implemented only in Chrome Canary and to some extent in latest chrome. (It's a little buggy) box-lines multiple is gone so to achieve this vertical layout there are a few ways. Using -webkit-flex-direction:column; so

<div id="flexbox">     <div class="box">DIV 1</div>     <div class="box">DIV 2</div>     <div class="box">DIV 3</div> </div> 

and css :

#flexbox {     display: -webkit-flex;     -webkit-flex-direction: column;     width: 500px;     height: auto;     min-height: 200px; }  #flexbox .box {     -webkit-flex: 1;  } 

Using wrapping:

-webkit-flex-wrap: wrap;  

and setting your direction to:

-webkit-flex-direction: row; 

So

<div id="flexbox">     <div class="box">DIV 1</div>     <div class="box">DIV 2</div>     <div class="box">DIV 3</div>     <div class="box">DIV 4</div>     <div class="box bigger">DIV 5</div>     <div class="box">DIV 6</div> </div>  #flexbox {     display: -webkit-flex;     -webkit-flex-direction: row;     -webkit-flex-wrap: wrap;     width: 500px;     height: auto;     min-height: 200px;     }  #flexbox .box {      -webkit-flex: 130px 1;      }  #flexbox .box.bigger {      -webkit-flex: 330px 1;      } 

There's a whole bunch of examples on the spec page linked above.