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:
- oooh flexbox looks nice, I’ll try it!
- OMG it’s amazing! Look Ma, no floats!
- 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.
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
order property is zero-based
order makes items jump around in unexpected ways until you get how it actually works. See How Flexbox Order Works
flex-basis is a curious beast
flex-basis property is fundamental to flexbox, and it has some important/interesting interactions with other properties like
max-width. See The Difference Between Width and Flex Basis
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
Oh, there’s more!
More writeups on flexbox pitfalls coming soon.