Skip to main content

​
Overview

Align self utilities let you override the container’s items-* rule for a single child. Use them when one item needs a different vertical position than the rest of the row.
ClassCSS
.self-startalign-self: flex-start;
.self-centeralign-self: center;
.self-endalign-self: flex-end;
Responsive self-*--on-* variants are also shipped.

​
Self Start

.self-start pulls one item to the top of the cross axis while the rest of the row stays stretched or follows the container rule. 
<div class="elementor-element flex items-stretch gap-4 min-h-24">
  <div class="card p-4">
    01
  </div>
  <div class="card p-4 self-start">
    02
  </div>
  <div class="card p-4">
    03
  </div>
</div>

​
Self Center

.self-center vertically centers one item within the row while siblings follow the container alignment. 
<div class="elementor-element flex items-stretch gap-4 min-h-24">
  <div class="card p-4">
    01
  </div>
  <div class="card p-4 self-center">
    02
  </div>
  <div class="card p-4">
    03
  </div>
</div>

​
Self End

.self-end pushes one item to the bottom of the cross axis. This is useful for anchoring a specific element to the baseline of the container. 
<div class="elementor-element flex items-stretch gap-4 min-h-24">
  <div class="card p-4">
    01
  </div>
  <div class="card p-4 self-end">
    02
  </div>
  <div class="card p-4">
    03
  </div>
</div>

​
Best Practices

  • Keep self-* for targeted exceptions instead of setting the whole line differently.
  • Use it on one item that needs a different visual anchor within the row.
  • Keep the base container rule predictable with items-*, then layer self-* only where needed.

Align Items

Set the shared cross-axis rule for the container

Order

Reorder items when alignment alone is not enough