Flexbox - Lesson 48

Align Content

Learn how to align multiple rows of flex items

📦

What is Align Content?

Control spacing between multiple rows of flex items

The align-content property controls how multiple rows are distributed in a flex container. It only works with flex-wrap: wrap.

Try different values:

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

align-content: flex-start

Note: align-content only works when you have multiple rows (with flex-wrap: wrap)