Hands On: CSS3 Flexible Box Layout

This demo allows web designers to create flexible collections using CSS3 Flexible Box Layout
Container size:
flex-align:
flex-pack:
flex-direction:
flex-wrap:

<div style="

display: -ms-box;

-ms-flex-align: middle;

-ms-flex-pack: justify;

-ms-flex-direction: normal;

-ms-flex-wrap: normal;

">

</div>

Number of lines:
Box heights:
flex-order:
flex:
Box 1:0
Box 2:0
Box 3:0
Box 4:0
Box 5:0
Box 6:0
Box 7:0
Box 8:0
Box 9:0

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

<div style="-ms-flex: 0;"></div>

Menu:

A flexible menu designed to contain items of variable size

Simple collection:

A simple collection, containing flexible items that can be
arranged and sorted in various ways

Flexible content sizing:

A simple yet flexible app design, with two fixed elements
and one variable region that grows to fill available space

This demo allows you to create CSS3 Flexible Box Layouts based on the March 2012 W3C Working Draft of CSS3 Flexible Box Layout.