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. 
<div class="elementor-element flex flex-wrap items-start content-start gap-4" style="min-height: 30rem;">
  <div class="w-1-3 card p-4">
    01
  </div>
  <div class="w-1-3 card p-4">
    02
  </div>
  <div class="w-1-3 card p-4">
    03
  </div>
  <div class="w-1-3 card p-4">
    04
  </div>
  <div class="w-1-3 card p-4">
    05
  </div>
  <div class="w-1-3 card p-4">
    06
  </div>
  <div class="w-1-3 card p-4">
    07
  </div>
  <div class="w-1-3 card p-4">
    08
  </div>
  <div class="w-1-3 card p-4">
    09
  </div>
  <div class="w-1-3 card p-4">
    10
  </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="w-1-3 card p-4">
    01
  </div>
  <div class="w-1-3 card p-4">
    02
  </div>
  <div class="w-1-3 card p-4">
    03
  </div>
  <div class="w-1-3 card p-4">
    04
  </div>
  <div class="w-1-3 card p-4">
    05
  </div>
  <div class="w-1-3 card p-4">
    06
  </div>
  <div class="w-1-3 card p-4">
    07
  </div>
  <div class="w-1-3 card p-4">
    08
  </div>
  <div class="w-1-3 card p-4">
    09
  </div>
  <div class="w-1-3 card p-4">
    10
  </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="w-1-3 card p-4">
    01
  </div>
  <div class="w-1-3 card p-4">
    02
  </div>
  <div class="w-1-3 card p-4">
    03
  </div>
  <div class="w-1-3 card p-4">
    04
  </div>
  <div class="w-1-3 card p-4">
    05
  </div>
  <div class="w-1-3 card p-4">
    06
  </div>
  <div class="w-1-3 card p-4">
    07
  </div>
  <div class="w-1-3 card p-4">
    08
  </div>
  <div class="w-1-3 card p-4">
    09
  </div>
  <div class="w-1-3 card p-4">
    10
  </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="w-1-3 card p-4">
    01
  </div>
  <div class="w-1-3 card p-4">
    02
  </div>
  <div class="w-1-3 card p-4">
    03
  </div>
  <div class="w-1-3 card p-4">
    04
  </div>
  <div class="w-1-3 card p-4">
    05
  </div>
  <div class="w-1-3 card p-4">
    06
  </div>
  <div class="w-1-3 card p-4">
    07
  </div>
  <div class="w-1-3 card p-4">
    08
  </div>
  <div class="w-1-3 card p-4">
    09
  </div>
  <div class="w-1-3 card p-4">
    10
  </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="w-1-3 card p-4">
    01
  </div>
  <div class="w-1-3 card p-4">
    02
  </div>
  <div class="w-1-3 card p-4">
    03
  </div>
  <div class="w-1-3 card p-4">
    04
  </div>
  <div class="w-1-3 card p-4">
    05
  </div>
  <div class="w-1-3 card p-4">
    06
  </div>
  <div class="w-1-3 card p-4">
    07
  </div>
  <div class="w-1-3 card p-4">
    08
  </div>
  <div class="w-1-3 card p-4">
    09
  </div>
  <div class="w-1-3 card p-4">
    10
  </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="w-1-3 card p-4">
    01
  </div>
  <div class="w-1-3 card p-4">
    02
  </div>
  <div class="w-1-3 card p-4">
    03
  </div>
  <div class="w-1-3 card p-4">
    04
  </div>
  <div class="w-1-3 card p-4">
    05
  </div>
  <div class="w-1-3 card p-4">
    06
  </div>
  <div class="w-1-3 card p-4">
    07
  </div>
  <div class="w-1-3 card p-4">
    08
  </div>
  <div class="w-1-3 card p-4">
    09
  </div>
  <div class="w-1-3 card p-4">
    10
  </div>
</div>

Flex Wrap

Enable multiple rows before aligning them

Align Items

Control item alignment inside each row