Below are several examples of the flexbox in action. I'm using the terminology from the 2009 spec as that's what browsers currently support.
Shown under the first example is the basic code I used to set up the flexbox (.box) and flexbox items (.boxitem). The examples that follow make use of this same code along with some additional or modified css. Only these additions or modifications are shown.
Some additional css used to style this page is not shown, but is available in the source code. There's also an example using box-lines that I couldn't get to work which I've commented out so it doesn't display here.
<div class="box"> <div id="box1" class="boxitem">flexbox item 1</div> <div id="box2" class="boxitem">flexbox item 2</div> <div id="box3" class="boxitem">flexbox item 3</div> </div> .box { outline: 1px solid red; width:600px; height:450px; display: box; box-pack: center; box-align: center; box-orient:horizontal; } .boxitem { width:150px; height:200px; }
box-orient:vertical;
flexbox item 1 {box-ordinal-group:2} flexbox item 2 {box-ordinal-group:3} flexbox item 3 {box-ordinal-group:1}
flexbox item 1 {box-flex:1} flexbox item 2 {box-flex:12} flexbox item 3 {box-flex:1}