Flexbox Reference Card

Container & items

01

Put display: flex on the parent. Its direct children automatically become flex items — no property needed on them.

.row {
  display: flex;
}

container → items

1

2

3

Main axis & direction

02

flex-direction sets the main axis. Everything else is described relative to it.

→ main axis
(row, default)

↓ cross axis
(perpendicular)

.col {
  display: flex;
  flex-direction: column;
}

justify-content — main axis

03

Positions items along the main axis — the direction set by flex-direction.

flex-start

1

2

3

center

1

2

3

space-between

1

2

3

space-around

1

2

3

align-items — cross axis

04

Positions items along the cross axis — perpendicular to the main axis.

flex-start

1

2

3

center

1

2

3

flex-end

1

2

3

stretch (default)

1

2

3

gap

05

Adds space between items only — not around the outside. Use it instead of margin on every item.

.row {
  display: flex;
  gap: 12px;
}

flex-wrap

06

By default items squeeze onto one line. wrap lets them drop to a new line instead.

narrow container, wrap

1

2

3

4

align-content — wrapped lines

07

Once flex-wrap creates more than one line, align-content spaces the lines apart. align-items still aligns items inside each line — one doesn't replace the other.

flex-wrap: wrap; + align-content: space-between;

1

2

3

4

5

6

order & align-self — one item, not all

08

Both go on the item, not the container — and override just that one child without touching the rest.

.item-3 {
  order: -1;
}
.item-2 {
  align-self: flex-end;
}

order: -1 moves item 3 first — visually only

1

2

3

align-self overrides align-items for item 2 alone

1

2

3

flex-grow & flex-shrink — item sizing

09

Distributes extra (flex-grow) or missing (flex-shrink) space unevenly. Goes on the item — on the container, it does nothing.

.item-2 {
  flex-grow: 1;
}
/* items 1 & 3 keep flex-grow: 0 (default) */

item 2 grows to fill extra space; 1 & 3 stay their size

1

2

3

flex-basis — starting size before grow/shrink

10

Sets an item's starting main-axis size before flex-grow/flex-shrink run. Goes on the item, and wins over width on the main axis.

.item-2 {
  flex-basis: 6rem;
}
/* shorthand: flex: grow shrink basis; */
.item-2 {
  flex: 1 1 6rem;
}

flex-basis alone: item 2 starts at 6rem, doesn't grow

1

2

3

flex: 1 1 6rem — starts at 6rem, then grows to fill space

1

2

3

Habits that keep layouts working

11

Ask two questions first: which element is the container, and what are its direct children?
Direction defines the main axis — justification and alignment follow from that, so switching to column swaps their effect.
Test the layout at a narrow and a wide preview width before calling it done.

Wrong elementdisplay: flex on an item instead of its parent does nothing for the layout you want.

No meaningful parentFlex items need a real wrapping container — don't apply it to unrelated siblings.

Guessing with spacingEmpty text or extra margins instead of gap breaks as soon as content changes.