Align Content

Use the shipped content-* utilities to distribute wrapped flex lines on the cross axis.

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.

Class	CSS
.content-start	align-content: flex-start;
.content-center	align-content: center;
.content-end	align-content: flex-end;
.content-between	align-content: space-between;
.content-around	align-content: space-around;
.content-evenly	align-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.

<!-- Three items at half width → two flex lines so content-* applies -->
<div class="elementor-element flex flex-wrap items-start content-start gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>

Center

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

<div class="elementor-element flex flex-wrap items-start content-center gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>

End

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

<div class="elementor-element flex flex-wrap items-start content-end gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>

Between

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

<div class="elementor-element flex flex-wrap items-start content-between gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>

Around

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

<div class="elementor-element flex flex-wrap items-start content-around gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>

Evenly

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

<div class="elementor-element flex flex-wrap items-start content-evenly gap-4" style="min-height: 30rem;">
  <div class="width-1-2 card padding-4">01</div>
  <div class="width-1-2 card padding-4">02</div>
  <div class="width-1-2 card padding-4">03</div>
</div>

Related Utilities

Flex Wrap

Enable multiple rows before aligning them

Align Items

Control item alignment inside each row