---
name: learned-css-flexbox-layout
description: Use when building or debugging CSS flexbox layouts and needing the right container vs item property for alignment, wrapping, sizing, or ordering.
---
# 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
```css
.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
```css
.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.
```css
.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.
```css
.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.
```css
.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")