Back to Post

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.

Horizontal Flexbox with box-pack and box-align centered

<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;
}

Vertical Flexbox

box-orient:vertical;

Horizontal Flexbox with box-ordinal-group set

flexbox item 1 {box-ordinal-group:2}
flexbox item 2 {box-ordinal-group:3}
flexbox item 3 {box-ordinal-group:1}

Horizontal Flexbox with box-flex set

flexbox item 1 {box-flex:1}
flexbox item 2 {box-flex:12}
flexbox item 3 {box-flex:1}