Skip to main content

​
Overview

Align items utilities control where every child sits along the cross axis of the flex container. Use them to vertically align items in a row or horizontally align items in a column.
ClassCSS
.items-startalign-items: flex-start;
.items-centeralign-items: center;
.items-endalign-items: flex-end;
.items-stretchalign-items: stretch;
Responsive items-*--on-* variants are also shipped.

​
Start

.items-start aligns all children to the start of the cross axis. Items with different heights will share a common top edge. 
<div class="elementor-element flex items-start gap-4 min-h-24">
  <div class="card p-4">
    Short
  </div>
  <div class="card p-6">
    Taller card
  </div>
  <div class="card p-4">
    Short
  </div>
</div>

​
Center

.items-center vertically centers all children within the container. This is the most common alignment for headers, navigation bars, and balanced rows. 
<div class="elementor-element flex items-center gap-4 min-h-24">
  <div class="card p-4">
    Short
  </div>
  <div class="card p-6">
    Taller card
  </div>
  <div class="card p-4">
    Short
  </div>
</div>

​
End

.items-end aligns all children to the end of the cross axis. Items share a common bottom edge. 
<div class="elementor-element flex items-end gap-4 min-h-24">
  <div class="card p-4">
    Short
  </div>
  <div class="card p-6">
    Taller card
  </div>
  <div class="card p-4">
    Short
  </div>
</div>

​
Stretch

.items-stretch makes every child fill the full cross-axis height of the container. This is the default flex behavior and is useful when cards or columns should match heights. 
<div class="elementor-element flex items-stretch gap-4 min-h-24">
  <div class="card p-4">
    01
  </div>
  <div class="card p-4">
    02
  </div>
  <div class="card p-4">
    03
  </div>
</div>

​
Best Practices

  • Use items-center for balanced rails, headers, and button rows.
  • Use items-stretch when every child should fill the shared cross-axis height.
  • Reach for self-* only when one child needs to break away from the group rule.

Align Self

Override one item without changing the whole row

Justify Content

Pair cross-axis and main-axis alignment together