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