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>
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>
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!! 💛
Top comments (2)
thanks for sharing Shubhangi!
Thank you Franceso!!