Learning Flexbox

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)

Share:
  • Been meaning to have a look at flexbox for a while – thanks for the info, I’ll see how I get on…

    • Sarah

      I’d love to hear how you find it, Nick.

  • I found this particular resource from Joni Trythall’s blog very helpful when I started tinkering around with flexbox syntax: http://jonibologna.com/flexbox-cheatsheet. It’s a handy cheatsheet of cheatsheets, with great visuals to help you identify when you might want to use a particular property in the flexbox context. Can’t recommend it enough.

  • I’m almost through the flexbox.io videos – Loving flexbox so far. I’m still very hesitant about using it on real projects. I read somewhere that it’s best (until better browser support) to use flexbox on micro-layout things – so not the full website layout, but on certain features or sections that would benefit. Is that what you have found?

    Once Flexbox can be used on full website layouts, designing sites will become even more different and require that design elements can flex, yet still look good. Even more so than media queries. (I’m mourning the pixel-perfection of times past)

  • Peter Woodworth

    Hi

    If your on a Mac take a look at the CodeKit app https://incident57.com/codekit/ . It will add all of the prefixes as you are working and saving. It does a lot more as well.

    Like you just starting to use Flexbox.

    Peter

  • I went through Wes Bos’ What the Flexbox. Very helpful and enjoyable. I have started using flexbox since and, wow, it is powerful. Love it already.
    Wes suggests using Autoprefixer (https://autoprefixer.github.io) to cope with the vendor prefixes, by the way.

  • Adding to Peter’s suggestion: Codekit is great but the actual tech. which deals with all the vendor prefixing automatically (when compiling CSS from LESS or Sass) is called Autoprefuxer. It’s built into Codekit and other tools like Gulp too. Best thing since CSS. 🙂

  • I have also been reading Rachel Andrews discoveries on CSS Grid and with Flexbox we should have finally have really good layout for web pages

    With Peter Woodworth and Mark Howells-Mead – Code Kit makes this stuff a lot easier to set up allowing you to concentrate on the creative stuff.

  • I’ve been digging into flexbox… and decided to use it for structure of a whole site. IOS9 seems to be angry about flex-basis: 0… but flex-basis: 0 is important if you want to set mins and maxs for some of your item widths. I have a feeling I’ll look at this site in a few years and it’ll seem hacky… but for now I’m getting squishiness and control… Give it a look! thedesignoffice.org