Tailwind CSS - Align Items

Previous
Quiz
Next

Tailwind CSS Align Items is a utility class used to position flex and grid items along the container's cross-axis.

Tailwind CSS Align Items Classes

The following is the list of Tailwind CSS Align Items classes that help in the effective alignment of flex and grid items along the cross axis.

Class CSS Properties
items-start align-items: flex-start;
items-end align-items: flex-end;
items-center align-items: center;
items-baseline align-items: baseline;
items-stretch align-items: stretch;

Functionality of Tailwind CSS Align Items Classes

  • items-start: This class replaces CSS align-items: flex-start; property. This class is used to align the grid and flex items to the start of the cross-axis.
  • items-end: This class replaces CSS align-items: flex-end; property. This class is used to align the grid and flex items to the end of the cross-axis.
  • items-center: This class replaces CSS align-items: center; property. This class is used to align the grid and flex items to the center of the cross-axis.
  • items-baseline This class replaces CSS align-items: baseline; property. This class is used to align the grid and flex items along the container's cross-axis so that all their baselines align.
  • items-stretch: This class replaces CSS align-items: stretch; property. This class stretches the grid and flex items in such a way that all the available space along the container's cross-axis is filled.

Tailwind CSS Align Items Classes Examples

The following examples will illustrate the Tailwind CSS Align Items class utility.

Starting Alignment of Grid Items

The items-start class positions the items to the start of the container's cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Items Start Class
    </h2>
    <div class="grid grid-cols-3 gap-4 items-start">
        <div class="bg-green-500 p-4 h-24">Item 1</div>
        <div class="bg-green-300 p-4 h-20">Item 2</div>
        <div class="bg-green-500 p-4 h-12">Item 3</div>
        <div class="bg-lime-500 p-4 h-24">Item 4</div>
        <div class="bg-lime-300 p-4 h-20">Item 5</div>
        <div class="bg-lime-500 p-4 h-12">Item 6</div>
    </div>
</body>

</html>

Ending Alignment of Grid Items

The items-end class positions the items to the end of the container's cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Items End Class
    </h2>
    <div class="grid grid-cols-3 gap-4 items-end">
        <div class="bg-green-500 p-4 h-24">Item 1</div>
        <div class="bg-green-300 p-4 h-20">Item 2</div>
        <div class="bg-green-500 p-4 h-12">Item 3</div>
        <div class="bg-lime-500 p-4 h-24">Item 4</div>
        <div class="bg-lime-300 p-4 h-20">Item 5</div>
        <div class="bg-lime-500 p-4 h-12">Item 6</div>
    </div>
</body>

</html>

Flex Items Center Alignment

The items-center class positions the items to the center of the container's cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Items Center Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-center
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
    </div>
</body>

</html>

Flex Items Baseline Alignment

The items-baseline class positions the items to the baseline of the container's cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Items Baseline Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-baseline
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28 h-24 ">Item 1</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 3</div>
        <div class="bg-green-500 p-4 w-28 h-24">Item 4</div>
        <div class="bg-green-500 p-4 w-28 h-20">Item 5</div>
        <div class="bg-green-500 p-4 w-28 h-12">Item 6</div>
    </div>
</body>

</html>

Flex Items Stretch Alignment

The items-stretch class stretches the items to fill the available space of the container's cross-axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Items Stretch Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28">Item 4</div>
        <div class="bg-green-500 p-4 w-28">Item 5</div>
        <div class="bg-green-500 p-4 w-28">Item 6</div>
    </div>
</body>

</html>
Print Page
Previous
Next
Advertisements