DEV Community

Cover image for Tailwind CSS tutorial #9: Align Self
Shubhi✨
Shubhi✨

Posted on

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>

Enter fullscreen mode Exit fullscreen mode

Output:
Image description

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>

Enter fullscreen mode Exit fullscreen mode

Output:
Image description

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>

Enter fullscreen mode Exit fullscreen mode

Output

Image description

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>

Enter fullscreen mode Exit fullscreen mode

Output:

Image description

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>

Enter fullscreen mode Exit fullscreen mode

Output

Image description

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

Overall Output

Image description

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!! 💛

Top comments (2)

Collapse
 
francescoxx profile image
Francesco Ciulla

thanks for sharing Shubhangi!

Collapse
 
fromshubhi profile image
Shubhi✨

Thank you Franceso!!