Hot off the heels of speaking at An Event Apart - DC my inspiration tank was full and “flexbox” was a word resonating around the corridors and the conference room.

I hadn’t had a period of self-learning for a little while, simply from being too chockablock with client work.

I quickly realised I reverted to the way I used to learn to code back in 2001. Paper, pen and repetition by doing.

A lesson in not eating crisps around your notes...

Flexbox, at first, felt very alien to me. Having got used to all the weird quirks and workarounds of using floats for many years, flexbox solved things, quickly, but I wasn’t entirely sure of why. It reminded me of the first time you learned the clearfix method. You were happy it worked, but weren’t entirely sure why.

I started breaking down each section and quickly realised a lot of the tutorials online referred to, flex-grow, flex-shrink and flex-basis as three different declarations. I had the most trouble understanding flex-grow, for some reason, until I read Chris Coyier’s CSS Tricks that explained everything is given a value of 1, and therefore, equal. If you increase it to “2”, you’re giving that particular box a property to grow twice as much as the others. That’s when I had the aha moment.

The other thing that felt quite alien was the automatic (read: very easy) nature of how flexbox solved problems that have been layout issues for years. I almost couldn’t believe how easy it was and had to triple check various browsers to make sure my eyes weren’t deceiving me.

Chris does a brilliant job of illustrating each nuance of flexbox, so I won’t repeat that here. I’ll just tell you about a few of the “aha” moments I had, to hopefully save you a few hours of “but why” questions.

Feel free to share any of your flexbox conundrums (and how you solved them) in the comments.

flex-basis

You see it written as flex-basis: 200px; in many tutorials, but it’s good practice to actually be incorporated into a shorthand property of flex: 1 0 200px;

It feels a bit like learning the clock trick for padding shorthand, when that came out all those years ago.

Imagine three imaginary headings above each property of 1 0 200px.
1 would have a heading of flex-grow (the 1 distributes all boxes evenly </sidenote>)
0 would have a property of flex-shrink
200px is flex-basis (this can also be a %)

display: flex;

By putting this onto an existing element, such as a <div> you are making that element a flex-container. I got confused when some tutorials kept referring to a “flex-container” like I had to have a special container, aside from any existing element. No. Adding display:flex; to any element makes it a flex container.

Any child elements of that container automatically then become flex items, with no additional coding required on the children (to make them flex items).

flex-wrap

This goes onto the flex container, or the container you’ve chosen to add display:flex; to. You’ll find the CSS in each breakpoint goes down, but the most common thing I found myself changing in breakpoints was

flex-wrap: wrap; to flex-wrap: nowrap;
Or vice-versa.

Vendor Pre-fixes

There’s lots of them. I wasn’t expecting that. No idea why.

For those who use any form of TextExpander, I created a set that I use to help speed things up.

You can get that here and import it into TextExpander or aText (which is what I now use).

Helpful Resources

CSS-Tricks - A Complete Guide to Flexbox
What the Flexbox
Laying Out a Flexible Future for Web Design with Flexbox
Flexbox Playground
Flexy Boxes
FlexieJS
(Hat tip to @cesidio)