Unlike align-items, which aligns individual Flex Items, align-content controls the position of the complete rows or columns created when Flex Items wrap.

When Does align-content Work?

align-content becomes useful when the Flex Container has multiple Flex Lines.

Multiple lines are normally created when flex-wrap: wrap; is used and the items cannot fit on one line.

If all Flex Items are on a single line, align-content generally has no visible effect.

Syntax

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: value;
}

Align Content Diagram

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Multiple Flex Lines are distributed along the cross axis.

Values of align-content

Value	Description
stretch	Stretches the Flex Lines to fill the available space.
flex-start	Places all Flex Lines at the beginning of the cross axis.
flex-end	Places all Flex Lines at the end of the cross axis.
center	Centers all Flex Lines along the cross axis.
space-between	Places equal space between the Flex Lines.
space-around	Places space around each Flex Line.
space-evenly	Creates equal spacing between Flex Lines and container edges.

1. align-content: flex-start

flex-start places all Flex Lines at the beginning of the cross axis.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

Output

HTML

CSS

Java

Python

2. align-content: flex-end

flex-end places all Flex Lines at the end of the cross axis.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
}

Output

HTML

CSS

Java

Python

3. align-content: center

center places the complete group of Flex Lines in the center of the cross axis.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

Output

HTML

CSS

Java

Python

4. align-content: space-between

space-between places equal space between the Flex Lines.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

Output

HTML

CSS

Java

Python

5. align-content: space-around

space-around distributes space around each Flex Line.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
}

Output

HTML

CSS

Java

Python

6. align-content: space-evenly

space-evenly creates equal space between the Flex Lines and the container edges.

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
}

Output

HTML

CSS

Java

Python

align-items vs align-content

Property	Controls
align-items	Alignment of individual Flex Items along the cross axis.
align-content	Alignment and spacing of multiple Flex Lines along the cross axis.

Common align-content Values

flex-start

Moves all Flex Lines toward the beginning of the cross axis.

flex-end

Moves all Flex Lines toward the end of the cross axis.

center

Groups all Flex Lines in the center of the container.

space-between

Places equal space between Flex Lines.

space-around

Adds space around each Flex Line.

space-evenly

Creates equal spacing between lines and container edges.

Important: align-content works with multiple Flex Lines. To create multiple lines, the Flex Container generally needs flex-wrap: wrap;. If there is only one Flex Line, use align-items for cross-axis alignment of the items.

Summary

The align-content property controls the alignment and spacing of multiple Flex Lines along the cross axis. It is mainly useful when flex-wrap: wrap; creates multiple lines. Common values include flex-start, flex-end, center, space-between, space-around, and space-evenly.

← Previous: Align Items

Next: Gap →