Previous: Flex Wrap Next: SaaS Features Section See Finish

Align Content - Starting Point

Control how rows are aligned when you have multiple lines with flex-wrap. Only works with wrapped content!

stretch (default)

Rows stretch to fill the container height

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

flex-start

Rows packed to the start of the container

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

flex-end

Rows packed to the end of the container

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

center

Rows centered in the container

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

space-between

Equal space between rows

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

space-around

Equal space around each row

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Instructions

Add display: flex, flex-wrap: wrap, and different align-content values to see how rows are aligned!

🤔 align-items vs align-content

This is crucial to understand! They control different things:

align-items

Controls items WITHIN each row

Tall Item Row 1
Normal Row 1
Short Row 1
Extra Tall Row 2
Normal Row 2
Tall Row 2
Normal Row 3
Short Row 3

👆 Notice: Items in each row align to each other independently

align-content

Controls ALL ROWS as a group

Row 1 Item A
Row 1 Item B
Row 1 Item C
Row 2 Item A
Row 2 Item B
Row 3 Item A
Row 3 Item B
Row 3 Item C

👆 Notice: All 3 rows move together as one block

Key Point:

align-content only works when you have multiple lines! If all items fit on one line, align-content has no effect.