5 Things I’ve Learned About FlexBox

At this point, I think we’ve all—those of us in the web development or web design world, at least—heard of a little thing called FlexBox. If you’ve been hiding under a rock, however, FlexBox is a new(ish) way to create layouts in CSS.

Today I’m going to share some things I’ve learned about FlexBox since it has become usable in all mainstream and evergreen browsers.

1. FlexBox isn’t a one stop fix #

Need some columns? Use FlexBox. Need to center something? Use FlexBox. Need to make two columns the same height? Use FlexBox. Truly, FlexBox can be used for so many things today that used to require sloppy CSS or even JavaScript.

But that doesn’t mean that you can use it for everything, or that it solves every problem. Even with the high level of awesome that FlexBox is, it just won’t always do what you need to do.

Just be prepared to use other tools if needed. Grid can be very useful and, yes, I even still use floats sometimes!

2. You can use FlexBox and Grid together #

FlexBox and Grid are not the same thing. They share a few similarities and can often be used to accomplish the same goals, but there are occasions where you may want to use both. And you should feel just fine doing so!

They are both great tools, so use whichever one serves your specific needs best, even if that’s both at the same time.

3. (Still) use AutoPrefixer #

FlexBox (and Grid) has great support in evergreen browsers. So great that at this point, there’s really no point in not using it.

But that doesn’t mean you shouldn’t use prefixes. I’d still recommend them for FlexBox, and running your code through an AutoPrefixer is pretty simple. Chances are you’ll catch some other styles that needed it anyways.

4. You’ll still need to do some maths #

Want five columns in that row? Cool! FlexBox can do that! Want each column to be a specific width? Awesome! FlexBox can do that! Want gaps between those columns! Cool… But let’s not get too… Oh, you want to get crazy with the margins and paddings and…

Okay, so in a perfect project you’ll be able to plan things out in a way where no math is going to be necessary on your end. But let’s be honest, most projects aren’t perfect. Or, if you’re like me, you’re frequently working on sites you didn’t develop or sites that were built before FlexBox was viable.

In these cases, you may still have to pull out the old calculator.

5. You don’t have to use it! #

Most developers today would say that you’re insane not to use FlexBox, and I’ll admit that I’m one of them! But I also don’t really care if you don’t. As a WordPress Developer, I’ve seen a vast array of styling techniques and, despite the popularity of newer techniques, the old ones usually still work.

Conclusion #

In the end, FlexBox is just another tool in the shed. How, when, and why you use it don’t really matter if the end product is there. Just be mindful of what your needs actually are and to ensure that your code is readable and easy to maintain. The rest is icing on the cake.

Besides, who doesn’t love doing some layouts in tables once in a while (just kidding).