Flexbox Cheat Sheet: The Properties That Actually Matter

I'll be honest. I've been writing CSS professionally for years and I still pause when I need to vertically center something with Flexbox. Not because the syntax is hard -- align-items: center -- but because I can never remember whether align-items is the cross axis or the main axis, and which axis is which depends on the flex direction. The mental model has a learning curve that the simplicity of the syntax hides. So here's the reference I wish I'd had when I started. Not the spec. Not the comprehensive guide. Just the parts that solve actual layout problems. The two axes Everything in Flexbox revolves around two axes: Main axis : the direction items flow. Set by flex-direction . Cross axis : perpendicular to the main axis. /* Main axis: horizontal (left to right) */ flex-direction : row ; /* Main axis: vertical (top to bottom) */ flex-direction : column ; Once you know which axis is which, the property names make sense: justify-content aligns items along the main axis align-items alig