Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 10, 2022 09:12 am GMT

Tailwind CSS tutorial 8: Align Items

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}

AlignmentTailwind ClassCSS Property
Startitems-startalign-items: flex-start;
Enditems-endalign-items: flex-end;
Centeritems-centeralign-items: center;
Baselineitems-baselinealign-items: baseline;
Stretchitems-stretchalign-items: stretch;

let's see each of this in action,

Start

Use items-start to align items to the start of the containers 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:
Image description

End

Use items-end to align items to the end of the containers 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

Image description

Center

Use items-center to align items along the center of the containers 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:

Image description

Baseline

Use items-baseline to align items along the containers 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

Image description

Stretch

Use items-stretch to stretch items to fill the containers 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

Image description

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


Original Link: https://dev.to/shubhicodes/tailwind-css-tutorial-8-align-items-1p43

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To