Flexbox Pitfalls and How to Avoid Them

Flexbox is amazing and powerful, but can feel so broken when you don't know the pitfalls and gotchas to watch out for. The emotion train of using flexbox typically goes like this:

1. oooh flexbox looks nice, I'll try it!
2. OMG it's amazing! Look Ma, no floats!
3. falls face first into pitfall I hate this CSS garbage!

That's how it was for me as well. I got so frustrated I decided to dive super deep and master the flexbox beast. Since then I've helped over 10,000 devs master flexbox through answering questions and building a full on Flexbox Zombies Mastery Game. From this experience I've seen patterns of what things trip people up the most. Here are the most common pitfalls and how to avoid them.

1. The flex shorthand changes flexbox defaults

The most common pitfall is what happens when you use the flex shorthand. See The Flex Shorthand Doesn't Play Nice

2. The order property is zero-based

Using order makes items jump around in unexpected ways until you get how it actually works. See How Flexbox Order Works

3. flex-basis is a curious beast

The flex-basis property is fundamental to flexbox, and it has some important/interesting interactions with other properties like width, min-width, and max-width. See The Difference Between Width and Flex Basis

4. flex-wrap flips your world upside down

As soon as you run out of space for all your flex items in a single line, you're going to need flex-wrap. This new property has a couple of gotchas, changes how items grow and shrink, and there's one value you'll want to avoid entirely! See Wrap Your Brain Around Flex-Wrap