I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

The Best Flexbox Resources

Apr 14 2016


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?! — Flexbox.io 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.

This entry was posted in CSS. Bookmark the permalink.

10 Responses to The Best Flexbox Resources

  1. Joan says:

    Great article. Thanks for sharing!

    Anyway, i would like to share my Flexbox examples on codepen i coded some time ago. Maybe someone will wind it useful.

    Fun with flex: http://codepen.io/joanclaret/pen/JYazyv


  2. Wow nevermind its in your list didnt see it when i first scanned through im an idiot 🙁

  3. the doer says:

    Thank you for sharing flexbox.io. This together with this article are really useful. What about repo to the examples that you use in flexbox.io course? I don’t se any link, did you make it available anywhere?

Leave a Reply

Your email address will not be published. Required fields are marked *