The CSS Flexible Box Layout Module introduces a new box model that allows elements to be laid out horizontally or vertically. Unused space can be assigned to particular children or distributed among them. Boxes can be nested to build complex layouts, with horizontal boxes inside vertical ones and vice versa. It includes new display and box-* properties to control the layout, orientation, alignment, and distribution of flexible children within their flexible parent container.

1. Flexible Box Model
Tom Janssens & Stian Didriksen

2. CSS Flexible Box Layout Module
The children of a box are laid out either:
● horizontally
● vertically
Unused space can be assigned to:
● particular child
● distributed among the children
Nest boxes to build layouts:
● horizontal inside vertical
● vertical inside horizontal

3. What about ...
Floats
Where we're going, we don't need floats
Calculations
Browser will do the calculations

4. Properties
New display property:
● display: box
8 new properties:
● box-orient
● box-pack
● box-align
● box-flex
● box-flex-group
● box-ordinal-group
● box-direction
● box-lines

5. Live demo!