Flexbox playground

Watch items move — then read why underneath each stage

Remember

justify-content: flex-start

A
B
C

Items pack toward the start of the main axis (left in a default row).

justify-content: flex-end

A
B
C

Items pack toward the end of the main axis (right in a default row).

justify-content: center

A
B
C

The group sits in the middle of the main axis.

justify-content: space-between

A
B
C

First item at the start, last at the end, equal gaps between them. No outer gap.

justify-content: space-around

A
B
C

Space around each item — edge gaps look about half the size of the middle gaps.

justify-content: space-evenly

A
B
C

Gaps are equal everywhere, including before the first and after the last item.

align-items: stretch (default)

A
B
C

On the cross axis, items stretch to fill the stage height (unless they have a fixed height).

align-items: flex-start / center / flex-end

A
B
C

Above: flex-start — tops line up. Change the class to ai-center or ai-end in CSS to pin them to the middle or bottom of the cross axis.

align-items: center (different heights)

A
B
C

Items keep their own heights and sit on the vertical center of the row’s cross axis.

align-items: flex-end

A
B
C

Items align to the bottom of the stage (end of the cross axis in a row).

flex-direction: row

A
B
C

Default. Main axis is horizontal — A, then B, then C left to right.

flex-direction: row-reverse

A
B
C

Same row axis, but the start is on the right — visual order flips.

flex-direction: column

A
B
C

Main axis is vertical. Now justify-content moves items up/down, and align-items moves them left/right.

flex-direction: column-reverse

A
B
C

Stacked from the bottom upward — A appears lowest in this stage.

gap: 0 / 8px / 24px

A
B
C
A
B
C
A
B
C

gap only adds space between items — not outside the first/last edge. Prefer gap over spreading margin on every child.

Center both ways

A
B
C

justify-content: center + align-items: center parks the group in the middle of the stage. Common for heroes and empty states.

Lab allow list: allowed.md. Rules: ../rules.md (7–10, 42).