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 aligns item