Skip to main content

​
Overview

Align content utilities control how wrapped flex lines are distributed along the cross axis. They only take effect when the container has multiple lines, so always pair them with .flex-wrap.
ClassCSS
.content-startalign-content: flex-start;
.content-centeralign-content: center;
.content-endalign-content: flex-end;
.content-betweenalign-content: space-between;
.content-aroundalign-content: space-around;
.content-evenlyalign-content: space-evenly;
Responsive content-*--on-* variants are also shipped.
align-content only becomes visible when the container has multiple flex lines, so pair it with .flex-wrap.

​
Start

.content-start packs all wrapped lines toward the top of the container.

​
Center

.content-center groups all wrapped lines in the vertical center of the container.

​
End

.content-end packs all wrapped lines toward the bottom of the container.

​
Between

.content-between places the first row at the top and the last row at the bottom, with equal space between the rest.

​
Around

.content-around distributes equal space around each row of items.

​
Evenly

.content-evenly distributes perfectly equal space between all rows and the container edges.

Flex Wrap

Enable multiple rows before aligning them

Align Items

Control item alignment inside each row