Flexbox

Before we jump in...

Layout minus the hacks

In the past, we’ve relied on tables and floats for layouts

Flexbox allows a parent to alter its items’ width/height to best fill the available space

The parent:

.parent {
    display: flex;
}

The child:

.child {
    flex: 1;
}

A quick demo:

Pretty easy, eh?

How about some examples?

Flexbox grid

Perfect centering

Application

To sum up:

Flexbox is really, really fun.

Not to mentions useful.

So use it, yo.

Thanks!

Timothy Miller

ForADesigner.com/Flexbox-in-Five