Let's be honest, CSS float layouts were a nightmare. Absolute and relative positioned things we won't say anything about. And display: table just feels really dirty. I mean really dirty. Especially when you started out using tables for layouts (I even felt dirty doing that, even though others felt it was fine).

There was always a designer who insists that content order is rearranged depending on the device - content in a different order on mobile vs desktop. That "dirty" feeling starts to surround me.

NOW CAN WE PLEASE START USING FLEXBOX? … or grid :-)

I say f*ck it. We are all about progressive enhancement and have been for years. I say if you want to work on bleeding edge projects then use it. If there is money riding on older browsers, then that's too bad, use the dirty table layout. But thankfully things like React native are using it!

Flexbox is a flexible layout system (an algorithm for positioning elements, whether floated, inline, table, grid). So when I say flexible layout system, I mean flexible in lots of ways. Reordering content is a breeze. Resizing is a pleasure.

It is a little tricky to get your head around it to begin with, like a lot of things in the industry, so first I'd suggest going through some of the resources below to get a good grounding.

Basics

You start off with a container element, a flex container, and set the display attribute like so: display: flex; (add any browser prefixes as necessary). You can also set it to display: inline-flex if you want it to be inline. Then we can go ahead and fill it with child elements. You don't have to specify any attributes on the child elements, they will automatically become child flex items. I created an example on github.

By far the best resource I have found to learn Flexbox is Flexbox.io. A really great resource!

Resources