Visit Pixel Rocket

Align Content - Finish

See how align-content controls the alignment of wrapped flex lines. This property only works when items wrap and creates multiple rows or columns.

See Start Next: Controlling Item Widths

stretch (default)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Wrapped lines stretch to fill the container height

flex-start

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Lines are packed toward the start of the cross axis

flex-end

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Lines are packed toward the end of the cross axis

center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Lines are centered along the cross axis

space-between

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Lines have equal space between them

space-around

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Lines have equal space around them

🤔 align-items vs align-content

align-items: center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Centers items within their row

align-content: center

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Centers the rows themselves

Key difference: align-items works on individual items within each row, while align-content works on the rows themselves when there are multiple rows

Key Takeaways

  • align-content controls the spacing and alignment of wrapped flex lines
  • Only works when:
    • Items are wrapped (flex-wrap: wrap)
    • There are multiple lines/rows
    • The container has extra space in the cross axis
  • Align Content Values:
    • stretch - Lines stretch to fill space (default)
    • flex-start - Lines packed to start
    • flex-end - Lines packed to end
    • center - Lines centered
    • space-between - Equal space between lines
    • space-around - Equal space around lines
  • vs align-items: align-items controls items within their line, align-content controls the lines themselves