Visual Cheatsheet: Flexbox

It took me awhile to get comfortable with Flexbox. It’s very powerful, and can make things easy that are difficult or impossible to accomplish otherwise, but the number of options can be overwhelming, and it works entirely unlike anything else in CSS.

While resources like the CSS Tricks A Complete Guide to Flexbox are indispensable for learning the details of how things work, there’s still too much going on to serve as a quick reference.

I wanted something that was as visually condensed as possible, and easy to scan visually. I need to see what elements styled using each properly will look like.

So I created this Visual Cheatsheet for Flexbox. I find myself using it all the time, and it’s helped me become truly comfortable with Flexbox syntax for the first time. Let me know if you find it useful.

Visual Cheatsheet for Flexbox