Align-Content & Multi-Line Packing Playground

07 FLEXBOX · MULTI-LINE

Tune the knobs, watch the rows move.

Align-Content & Justify-Content

Axes: main row → x cross column → y

Tip: justify-content always works on items along the main axis. align-content works on the stack of lines on the cross axis — and only when you have wrapping, multiple lines, and extra space.

LAB CONTROLS

flex-direction main vs cross axes

justify-content within each line

align-content stack of lines

container height 260 px

flex-wrap: wrap

Turn wrapping off to see single-line behavior.

Watch for the classic gotcha: justify-content still works on items in each line. align-content only kicks in when you have wrapping, multiple lines, and cross-axis space to distribute.