Align Self

Controls how an individual flex or grid item is aligned along the cross axis, overriding the container's align-items setting. This utility allows for precise control over the alignment of specific items within a flex or grid container, letting you create exceptions to the overall alignment pattern. In Tailwind v4, align-self utilities have improved compatibility with logical properties for better RTL support.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="flex items-center h-32 bg-gray-100 p-4 rounded-lg">
  <div class="self-start bg-blue-100 p-4 rounded">Start</div>
  <div class="bg-blue-200 p-4 rounded">Center (from container)</div>
  <div class="self-end bg-blue-300 p-4 rounded">End</div>
  <div class="self-stretch bg-blue-400 p-4 rounded">Stretch</div>
  <div class="self-baseline bg-blue-500 p-4 text-lg text-white rounded">Baseline</div>
</div>

Examples

Items with different self-alignment in a centered container

<div class="flex items-center h-32 bg-gray-100 p-4 rounded-lg">
  <div class="self-start bg-blue-100 p-4 rounded">Start</div>
  <div class="bg-blue-200 p-4 rounded">Center (from container)</div>
  <div class="self-end bg-blue-300 p-4 rounded">End</div>
  <div class="self-stretch bg-blue-400 p-4 rounded">Stretch</div>
  <div class="self-baseline bg-blue-500 p-4 text-lg text-white rounded">Baseline</div>
</div>

Edit in playground

Form with label aligned to the top for textarea using self-start

<!-- Form with custom alignment for specific elements -->
<form class="bg-white p-6 rounded-lg shadow-md max-w-xl mx-auto">
  <h2 class="text-xl font-bold mb-4">Account Settings</h2>
  
  <div class="flex items-center mb-4">
    <label class="w-32 text-gray-700">Username:</label>
    <input type="text" class="flex-1 px-3 py-2 border rounded" value="johndoe" />
  </div>
  
  <div class="flex items-center mb-4">
    <label class="w-32 text-gray-700">Email:</label>
    <input type="email" class="flex-1 px-3 py-2 border rounded" value="john@example.com" />
  </div>
  
  <div class="flex mb-4">
    <label class="w-32 self-start pt-2 text-gray-700">Bio:</label>
    <textarea class="flex-1 px-3 py-2 border rounded h-24"></textarea>
  </div>
  
  <div class="flex mb-4">
    <label class="w-32 self-center text-gray-700">Profile Image:</label>
    <div class="flex-1">
      <div class="flex items-center">
        <div class="w-16 h-16 bg-gray-200 rounded-full mr-4"></div>
        <button class="px-3 py-1 bg-gray-200 rounded text-sm">Upload New</button>
      </div>
    </div>
  </div>
  
  <div class="self-end mt-6 flex justify-end">
    <button type="button" class="px-4 py-2 border rounded mr-2">Cancel</button>
    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded">Save Changes</button>
  </div>
</form>

Edit in playground

Product card with self-aligned elements

<!-- Card with featured element -->
<div class="flex items-start bg-white rounded-lg shadow-md overflow-hidden">
  <div class="flex-1 p-4">
    <h3 class="font-bold mb-1">Product Name</h3>
    <p class="text-gray-600 text-sm mb-3">This is a brief description of the product that explains its features and benefits.</p>
    <div class="flex items-center text-sm text-gray-500">
      <span>$49.99</span>
      <span class="mx-2">•</span>
      <span>In Stock</span>
    </div>
  </div>
  
  <div class="self-stretch flex flex-col">
    <div class="bg-green-500 text-white text-xs font-bold px-2 py-1 self-end">SALE</div>
    <div class="flex-grow flex items-center justify-center p-4 bg-gray-50">
      <div class="w-24 h-24 bg-blue-100 rounded flex items-center justify-center">
        <span class="text-blue-600 font-medium">Image</span>
      </div>
    </div>
    <button class="self-stretch bg-blue-600 text-white py-2 px-4 text-sm font-medium">Add to Cart</button>
  </div>
</div>

Edit in playground

Timeline with self-centered markers

<!-- Timeline with alternating content alignment -->
<div class="relative max-w-3xl mx-auto py-8">
  <!-- Center line -->
  <div class="absolute inset-0 flex justify-center">
    <div class="w-0.5 h-full bg-gray-200"></div>
  </div>
  
  <!-- Timeline items -->
  <div class="relative z-10 space-y-12">
    <div class="flex items-center">
      <div class="flex-1 pr-8 text-right">
        <h3 class="font-bold text-lg">First Event</h3>
        <p class="text-gray-600">This happened first in the timeline.</p>
      </div>
      <div class="self-center flex-shrink-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white dark:border-gray-900"></div>
      <div class="flex-1 pl-8"></div>
    </div>
    
    <div class="flex items-center">
      <div class="flex-1 pr-8"></div>
      <div class="self-center flex-shrink-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white dark:border-gray-900"></div>
      <div class="flex-1 pl-8">
        <h3 class="font-bold text-lg">Second Event</h3>
        <p class="text-gray-600">This followed shortly after the first event.</p>
      </div>
    </div>
    
    <div class="flex items-center">
      <div class="flex-1 pr-8 text-right">
        <h3 class="font-bold text-lg">Third Event</h3>
        <p class="text-gray-600">The timeline continues with this event.</p>
      </div>
      <div class="self-center flex-shrink-0 w-4 h-4 bg-blue-600 rounded-full border-4 border-white dark:border-gray-900"></div>
      <div class="flex-1 pl-8"></div>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Align Self utility with different values

Open Interactive Playground

Variants

auto: uses the parent container's align-items value; start: aligns to the start of the cross axis; end: aligns to the end of the cross axis; center: centers on the cross axis; stretch: stretches to fill the container on the cross axis; baseline: aligns by the text baseline

autostartendcenterstretchbaseline