Flexbox Cheatsheet Cheatsheet

If you enjoy this weird little reference you may also be interested in the updated, revamped printed booklet version: A Field Guide to Flexbox.

While I am no stranger to the magic of Flexbox, I find that I am not using it very often just yet. As a result I end up pausing and referring back to this post at CSS-Tricks whenever an opportunity to utilize its powers presents itself.

I set out to create a quick visual to summarize Flexbox when I run into these moments of pause in the future. I like to think of it as a little diagram (flow chart? decision tree-ish thing?) that is a cheatsheet...based on cheatsheets.

Anyway, I thought I would share it just in case others may find such a resource beneficial as well. You can also take a look at the demo I used over at CodePen to practice/tinker your flexible heart out.

If you would prefer to have this guy as a PDF you can grab that here.

Flexbox Cheatsheet Cheatsheet