CSS Layout

Back to menu

flexbox

First proposed as part of the W3C specification in 2009. Currently fully supported by all latest browsers. Partially supported by IE11 and IE10.

Flexbox is the first real viable tool for web developers that is designed and is intended to help web developers layout their websites. Huzzah!.

The introduction of flexbox heralds what Eric Meyer calls 'The era of intential layout'.

Pros

flexbox is great for one dimensional layouts. By this I mean laying out items along a line either horizontally or vertically. The lines can be wrapped to create grids and the direction can be changed using flex-direction

flexbox can solve classic web development problems like vertical alignment, displaying elements in contrary to source order and justifying content.

Cons

Not ideal for creating multi dimensional layouts but can be used for it.

Further reading