CSS Flexbox Reference

Flexbox has TWO sets of properties: container properties (on the parent) and item properties (on the direct children). The single most important mental model: justify-content works on the main axis, align-items works on the cross axis — and which one is horizontal depends on flex-direction.

Setup

.container { display: flex; }

This creates a main axis (horizontal by default) and a cross axis (vertical by default). Children now lay out along the main axis instead of stacking.

Container properties

flex-direction

• row (default) → main axis horizontal (left→right), cross axis vertical (top→bottom)
• column → main axis vertical, cross axis horizontal
• Changing this SWAPS what justify-content and align-items control.

justify-content (aligns on MAIN axis)

• flex-start (default), flex-end, center
• space-between — first & last items at edges, even space between
• space-around — equal space around each item (edges get half)
• space-evenly — equal space everywhere including edges

align-items (aligns on CROSS axis)

• flex-start, flex-end, center
• baseline — aligns the text baselines of items even when font sizes differ

flex-wrap

• nowrap (default) — items crush together to fit one line
• wrap — items wrap to new lines when out of space

align-content (aligns wrapped ROWS on cross axis)

• ONLY works when flex-wrap: wrap AND items actually wrap.
• Same values as justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly.
• Do not confuse with align-items (which aligns items within a line).

gap

.container { gap: 1em; }

Adds spacing between items without margins.

Item properties (on direct children)

flex-grow

Unitless proportion. Allows an item to grow into remaining space.

.item-3 { flex-grow: 1; }

If all items have flex-grow:1, remaining space is distributed equally.

flex-shrink

Unitless. How fast an item shrinks relative to siblings. Higher = shrinks faster. flex-shrink: 0 prevents shrinking entirely.

flex-basis

Sets item size before remaining space is distributed; overrides width.

.item-1 { width: 150px; flex-basis: 300px; } /* effective size follows basis */

flex-basis: 0 shrinks item to its minimum.

flex (SHORTHAND — prefer this)

flex: <grow> <shrink> <basis>. Second and third are optional. flex: 1 auto-sets sensible values. The author almost always uses the shorthand instead of the three individual properties.

align-self

Overrides align-items for ONE item. Values: center, flex-start, flex-end, baseline.

.container { align-items: flex-start; }
.item-1 { align-self: center; }

order

Changes visual order; default is 0. order: -1 moves an item first, positive values move it later. Avoid unless absolutely necessary — it breaks the match between DOM order and visual order, hurting semantics and accessibility.

Quick decision guide

• Distribute items horizontally → justify-content
• Vertically center a row of items → align-items: center
• Prevent overflow crushing → flex-wrap: wrap
• Make one item fill leftover space → flex: 1 on that item
• Stop one item from shrinking → flex-shrink: 0
• Reposition a single item's cross-axis alignment → align-self

Source: https://www.youtube.com/watch?v=phWxA89Dy94 (Slaying The Dragon — "Learn Flexbox CSS in 8 minutes")