Flexbox is already here

Dear everyone,

Why aren’t you using flexbox for your UI layouts yet?

Is it because you’re worried about browser support? You shouldn’t be. Unless you need to support IE 10 and under (which is the definition of true sadness in 2016), you’re supported!

Is it because you’re using a prefab grid system in a larger framework? Well, both Bootstrap and Foundation are moving to flexbox grids instead of float-based ones. In fact, a lot of what flexbox allows you to do is recreate complex layouts that used to require a framework in just a couple of lines of vanilla CSS!

Is it because its confusing and new and frustrating? That’s understandable (though I wouldn’t really call flexbox new). If so, allow me to share some handy links that will hopefully will help you adopt this powerful, well-supported, sanity-saving set of features that make CSS dramatically less crap.

If you like videos, may I highly recommend Wes Bos’s What the Flexbox series. It’s 20 short (under 10m) videos for learning the ins and outs of flexbox.

If games are more your thing, check out Flexbox Froggy. Play frogger and learn flexbox at the same time! Also, after polling numerous amphibians, I can safely say this is the definitive cutest way to learn flexbox. Looking for more action/explosions/strategy? Try FlexboxDefense. It’s a tower defense game for learning flexbox!

Interested in more real world applications of Flexbox? Then Solved By Flexbox is your jam. I linked to it above, but its so dang useful it bears mentioning again. Try just downloading some of the templates and screwing around with them as the basis for a page and I think you’ll be pleasantly surprised by how much you can accomplish with zero framework or grid library.

Rather go the traditional tutorial route? Check out LearnLayout’s excellent chapter on Flexbox. Its a great introduction, but don’t forget to check out the rest of what LearnLayout offers – its a great guide for getting into building web-based UIs.

Looking for a handy reference guide? Look no further than CSS Tricks’s Complete Guide to Flexbox, a link I have personally visited so many times I’m shocked it isn’t half-burned into my monitor.

Just the facts, ma’am? Well, okay, as per usual, MDN delivers. If you want flexbox docs, this is the place for it (along with docs for every damn thing about vanilla web technologies).

In conclusion, please, consider using flexbox. You’ll be a happier person for it, your codebase will look prettier, and your time spent navigating the hazards of abusing float for layout purposes will shrink to damn near zero.

Happy flexboxing,


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s