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) add on. 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.
Terminology
- axis
- the flow in which elements flow, vertical or horizontal
- cross axis
- opposite to the parent axis
- flex-container
- a parent container that contains flexible child flex-items
- flex-items
- nested child elements that adjust to parents size
Basics
Layouts are based on parent layout containers and flexible child containers. What this means is when the parent containers are resized, the children automatically adjust.
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.
There is another concept to cover - the main and cross axis. X and Y if you like. This is the flow direction, either x or y, main or cross.
I created an example on github. By far the best resource I have found to learn Flexbox is Flexbox.io. A really great resource!