CSS.3: Flexbox


​Flexbox is an alternative and often more convenient system for CSS layout.
Also see the section on column layouts using flexbox here.​

Distributing Boxes

One of best features of flexbox is it's ability to distribute boxes across the available space in intuitive ways. It's very easy to visually explain the ways that flexbox will do this.

Align Content

Align Items

Justify Content


Position and Distribute Elements Using Flexbox

Don't worry too much about the end sections of the exercise. We won't be using things like order very often.

Further Reading

Game that teaches flexbox:​