This last year I have had the pleasure of using Flexbox regularly at work. I have had some trouble with memorizing the relationship between flex-direction, align-items and justify-content, specifically in the context of centering elements in a flex container. My everyday routine has up until now been browsing through each possible value, using the Chrome Developer Tools, until I got what I wanted. Not very elegant.
So, it was time for a change. I made this simple cheatsheet and thought it might be of useful for others. It’s just a small reminder getting me on the right track. In fact, after a couple of rounds with this, I think I got it to stick. There are far more thorough tutorials if you want to get a better understanding of how Flexbox works.
Of course, the cheatsheet is written using Flexbox and is hosted at http://owickstrom.github.io/flexbox-centering-cheatsheet/. You need a modern browser for it to render correctly. The source is available at Github.
Fredrik Frodlund
13 Oct 2014Nice! The authors of the spec sure could’ve used a little better terminology than align-items and justify-content. Not to mention the cross-axis and main-axis naming. :)
Oskar Wickström
14 Oct 2014Thanks, Fredrik! Yeah, I agree. The naming feels a bit rushed somehow.