Tailwind CSS tutorial #9: Align Self

In the article, we will go into detail on how to use align-self.

Align Self

Tools for adjusting a single flex or grid item's position in relation to its container's cross axis.

Format

self-{alignment}

Alignment	Tailwind Class	CSS Property
Auto	`self-auto`	`align-self: auto;`
Start	`self-start`	`align-self: flex-start;`
End	`self-end`	`align-self: flex-end;`
Center	`self-center`	`align-self: center;`
Stretch	`self-stretch`	`align-self: stretch;`

let's see each of this in action,

Auto

Use self-auto to align an item based on the value of the container’s align-items property:

<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-auto rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-auto</div>
  </div>
</li>

Output:

Start

Use self-start to align an item to the start of the container’s cross axis, despite the container’s align-items value:

<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-start rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-start</div>
  </div>
</li>

Output:

End

Use self-end to align an item to the end of the container’s cross axis, despite the container’s align-items value:

<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-end rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-end</div>
  </div>
</li>

Output

Center

Use self-center to align an item along the center of the container’s cross axis, despite the container’s align-items value:

<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-center rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-center</div>
  </div>
</li>

Output:

Stretch

Use self-stretch to stretch an item to fill the container’s cross axis, despite the container’s align-items value:

<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-stretch rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">self-stretch</div>
  </div>
</li>

Output

Full code:
The overall code will be attached to repo link.

Overall Output

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Justify Self, Align Content and Align Items.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

Keep learning! Keep coding!! 💛