CSS3 Flexible Box Model Demo

A simple demonstration of the CSS3 Flexible Box Layout Module. For more details, see the blog post CSS3 and AV revisited (with flexible box layout). According to caniuse.com, browsers that support this currently are Firefox 3.5+, Safari 3.2+, and Chrome 9.0+. In addition, Mobile Webkit on iOs and Android support it.

1. Normal div elements

Editable CSS:

Example:

Box 1
Box 2
Box 3

2. Display property set to box

Editable CSS:

Example:

Flex Box 1
Flex Box 2
Flex Box 3

3. Display property set to box, order changed

Editable CSS:

Example:

Flex Box 1
Flex Box 2
Flex Box 3