This year I finally dared to invest some serious time into Flexbox. The past years flexbox still seemed pretty unreliable, unsupported, and to be frank: new and scary. But 2015 is (was) a year of dropping support for ancient browsers, lurking into new territories and finally, flexing some brand new code muscles.

As we've been developing with the same display properties (especially floats) for years now, it's kinda challenging to start on a whole new, unfamiliair syntax that gives surprising results half of the time. Luckily, there are some clever people who've made amazing resources and tools in which they uncover everything about flexbox. Here's a list of resources I use on a regular basis:

CSS-Tricks: A guide to flexbox

Written by our very own Chris Coyer, this is THE overview I use whenever I forget the syntax or any property effects. It's the first result when you google Flexbox (as long as you haven't been clicking any damned w3schools links) and is the best reference / cheatsheet I found yet.

Solved by flexbox

I've always hated the display: table-cell technique and absolute positioning / transforming isn't always the solution. This is one of many things which is solved by Flexbox. align-items and justify-content FTW.

Flexbox's Best-kept Secret

In all honesty, I loathe the dramatic title, but hey, it's posted on Medium.com so it must've been written accompanied by a bunch of latte macchiatio's at starbucks. Anyway, the point that the article makes is great. Flexbox and Margin auto is a match made in heaven. Why? Well, go read the article!

What is flexbox?

Nice Medium article on the workings of flexbox, sans hipster title ;).

Flexbox Froggy

I'm a sucker for 'gamification'. If you'd gamify eating kittens I'd probably eat a box of 'em. Luckily, this Flexbox game is a lot friendlier and asks you to return frogs to their lillypads with flexbox technique. It's a great little game which lets you know where your flexbox skills stand and it might learn you something new as well.

Flexbox Froggy

From the makers of Flexbox Froggy: Flexbox defense! A tower defense game that asks everything from your flexbox skills.

Awesome Flexbox

A huge list of Flexbox resources, from how-to's 'till known bugs. Bookmark this.

CSS Flexbox resources

A handpicked collection of articles about Flexbox by heydesigner.com

Animating flexbox order by Blake Bowen

I haven't had a use for this yet, but I bet it'll come up some day soon.

I'll keep updating this post if I find any new resources that seem usefull.In the meantime, please share your resources in the comment, and if you have any questions I'll be glad to answer them.. if I can!


1,958 5 47