Align content controls how multiple rows of flex items are spaced inside a flex container.
This property works only when:
- The container has flex-wrap enabled
- There is more than one row of flex items
Many beginners confuse align-items with align-content, but they do different jobs.
Flex-start places all rows at the top of the container.
Even though there is extra space below, the rows stay packed at the beginning.
Center moves all rows to the middle of the container.
This is useful when you want balanced vertical spacing in grid-like layouts.
Align-content space-between spreads rows evenly from top to bottom.
This is useful in dashboards where multiple sections must fill vertical space evenly.
Common align-content values
- flex-start packs rows at the top
- center moves rows to the middle
- flex-end moves rows to the bottom
- space-between spreads rows across the container
- space-around adds equal space around rows
- stretch stretches rows to fill the container
Stretch makes rows expand to fill the available height of the container.
This helps create full-height layouts without extra CSS.
Practice task
Create a flex container with:
- flex-wrap enabled
- height 250px
Then try:
- align-content flex-start
- center
- space-between
- stretch
Observe how the rows move.
Next lesson
In the next page, you will learn about flex-grow, flex-shrink, and flex-basis.