Flexible Box Model

Tom Janssens & Stian Didriksen

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

What about ...

FloatsWhere we're going, we don't need floats

CalculationsBrowser will do the calculations

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

Live demo!