The Best Flexbox Resources

The Best Flexbox Resources


Flexbox is unbelieveable - it's not only making complex layouts easier to build, it's starting to push the limits of what we can do in the browser and in turn makes us better designers.

Yeah it's a bit hard to learn. Yeah there are bugs. Yeah the API is funky. Quit your belly achin' — spend an afternoon learning flexbox and that will all melt away.

With the demise of IE9 for most developers, everyone is learning flexbox! With that, we have seen some fantastic Flexbox resources popup. Here are the best ones to update your skillset and get some practice.

Chris Wright has some great experiments and has done a ton of research into how to best use Flexbox.What The Flexbox?! — is a quick, free 20 video course aimed at getting you to drop your float knowledge and understand the fundamentals of Flexbox.Flexbugs is a Github repo full of the weird cross browser bugs that you may hit accompanied with solutions on how to solve them.Almost complete guide to flexbox (without flexbox) is a cheatsheet-esque guide that offers backwards compatible alternatives to flexbox properties.CSS-Tricks Flexbox Reference is a must bookmark for anyone needing a quick visual reference on each of the flexbox properties.Webflow Builder is a great tool that will help you build Flexbox layouts.Flexbox Froggy is a really fun game aimed at teaching you flexbox. It helps with the question "How do I get this to go there?!".Flexbox in 5 is a quick tutorial that steps you through high level flexbox understanding.Flexbox Game is another fun game that will help you sharpen your flexbox skills.

Find an issue with this post? Think you could clarify, update or add something?

All my posts are available to edit on Github. Any fix, little or small, is appreciated!

Edit on Github

Syntax Podcast

Hold on — I'm grabbin' the last one.

Listen Now →
Syntax Podcast

@wesbos Instant Grams

Master Gatsby

Master Gatsby

Building modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites, but extra development and tooling get in the way.

Gatsby is a React.js framework that does it all for you. This course will teach you how to build your websites and let Gatsby take care of all the Hard Stuff™.
I post videos on and code on

Wes Bos © 1999 — 2022

Terms × Privacy Policy