In the article, we will go into detail on how to use align-items.
Align Items
Utilities for controlling how flex and grid items are positioned along a container's cross axis.
Format
items-{alignment}
| Alignment | Tailwind Class | CSS Property |
|---|---|---|
| Start | items-start |
align-items: flex-start; |
| End | items-end |
align-items: flex-end; |
| Center | items-center |
align-items: center; |
| Baseline | items-baseline |
align-items: baseline; |
| Stretch | items-stretch |
align-items: stretch; |
let's see each of this in action,
Start
Use items-start to align items to the start of the container’s cross axis:
<li class="w-full h-40 flex items-center px-4 py-2">
<div class="items-start h-full bg-green-100 justify-items-auto grid grid-cols-3 w-full gap-1">
<span class="py-2 bg-red-500 text-white px-3 rounded-md">1</span>
<span class="text-6xl py-6 bg-green-500 text-white px-3 rounded-md">2</span>
<span class="py-6 bg-blue-500 text-white px-3 rounded-md">3</span>
</div>
<div class="ml-5 text-right w-1/3">
<div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">items-start</div>
</div>
</li>
Output:
End
Use items-end to align items to the end of the container’s cross axis:
<li class="w-full h-40 flex items-center px-4 py-2">
<div class="items-end h-full bg-green-100 justify-items-auto grid grid-cols-3 w-full gap-1">
<span class="py-2 bg-red-500 text-white px-3 rounded-md">1</span>
<span class="text-6xl py-6 bg-green-500 text-white px-3 rounded-md">2</span>
<span class="py-6 bg-blue-500 text-white px-3 rounded-md">3</span>
</div>
<div class="ml-5 text-right w-1/3">
<div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">items-end</div>
</div>
</li>
Output
Center
Use items-center to align items along the center of the container’s cross axis:
<li class="w-full h-40 flex items-center px-4 py-2">
<div class="items-center h-full bg-green-100 justify-items-auto grid grid-cols-3 w-full gap-1">
<span class="py-2 bg-red-500 text-white px-3 rounded-md">1</span>
<span class="text-6xl py-6 bg-green-500 text-white px-3 rounded-md">2</span>
<span class="py-6 bg-blue-500 text-white px-3 rounded-md">3</span>
</div>
<div class="ml-5 text-right w-1/3">
<div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">items-center</div>
</div>
</li>
Output:
Baseline
Use items-baseline to align items along the container’s cross axis such that all of their baselines align:
<li class="w-full h-40 flex items-center px-4 py-2">
<div class="items-baseline h-full bg-green-100 justify-items-auto grid grid-cols-3 w-full gap-1">
<span class="py-2 bg-red-500 text-white px-3 rounded-md">1</span>
<span class="text-6xl py-2 bg-green-500 text-white px-3 rounded-md">2</span>
<span class="py-6 bg-blue-500 text-white px-3 rounded-md">3</span>
</div>
<div class="ml-5 text-right w-1/3">
<div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">items-baseline</div>
</div>
</li>
Output
Stretch
Use items-stretch to stretch items to fill the container’s cross axis:
<li class="w-full h-40 flex items-center px-4 py-2">
<div class="items-stretch h-full bg-green-100 justify-items-auto grid grid-cols-3 w-full gap-1">
<span class="py-2 bg-red-500 text-white px-3 rounded-md">1</span>
<span class="text-6xl py-6 bg-green-500 text-white px-3 rounded-md">2</span>
<span class="py-2 bg-blue-500 text-white px-3 rounded-md">3</span>
</div>
<div class="ml-5 text-right w-1/3">
<div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">items-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-Content, Responsive Navbar and Justify-Item.
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 (0)