Tailwind CSS - Align Self

Previous
Quiz
Next

Tailwind CSS Align Self is a utility class used to align individual grid and flex items along its container's cross axis.

Tailwind CSS Align Self Classes

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

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

Functionality of Tailwind CSS Align Self Classes

  • self-auto: This class replaces the CSS align-self: auto; property. It is used to align items based on the value of the align-items property of their parent container element.
  • self-start: This class replaces the CSS align-self: flex-start; property. It is used to position individual items at the start of the container's cross-axis, regardless of the container's align-items value.
  • self-end: This class replaces the CSS align-self: flex-end; property. It is used to position individual items at the end of the container's cross-axis, regardless of the container's align-items value.
  • self-center: This class replaces the CSS align-self: center; property. It is used to position individual items at the center of the container's cross-axis, regardless of the container's align-items value.
  • self-stretch: This class replaces the CSS align-self: stretch; property. It stretches individual items to fill the available space in their container's cross-axis, regardless of the container's align-items value.
  • self-baseline: This class replaces the CSS align-self: baseline; property. It is used to position individual items at the baseline of the container's cross-axis, regardless of the container's align-items value.

Tailwind CSS Align Self Classes Examples

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

Auto Alignment of Flex Items

The self-auto class sets the individual items to be positioned based on the value of the container's align-itemsproperty, 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 Self Auto Class
    </h2>
    <div class="flex flex-wrap gap-3 h-64 items-stretch
                bg-lime-200">
        
        <!--The self-auto class enable individual item to align -->
        <!-- itself based on the align-items property of parent grid container-->
        
        <div class="bg-green-500 p-4 w-28 self-auto">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>

Flex Items Starting Alignment

The self-start class sets the individual items to be positioned 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 Self Start 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-300 p-4 w-28 self-start">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>

Flex Items Ending Alignment

The self-end class sets the individual items to be positioned 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 Self End 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-300 p-4 w-28 self-end">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>

Grid Items Center Alignment

The self-center class sets the individual items to be positioned 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 Self Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-4 h-36">Item 1</div>
        <div class="bg-green-300 p-4 h-24 self-center">Item 2</div>
        <div class="bg-green-500 p-4 h-36">Item 3</div>
        <div class="bg-green-500 p-4 h-36">Item 4</div>
        <div class="bg-green-300 p-4 h-24 self-center">Item 5</div>
        <div class="bg-green-500 p-4 h-36">Item 6</div>
    </div>
</body>

</html>

Flex Items Stretch Alignment

The self-stretch class sets the individual items to be stretched 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 Self 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-300 p-4 w-28 self-stretch">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>

Grid Items Baseline Alignment

The self-baseline class sets the individual items to be positioned 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 Self Baseline Class
    </h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="bg-green-500 p-4 h-20">Item 1</div>
        <div class="bg-green-300 p-4 self-baseline">Item 2</div>
        <div class="bg-green-500 p-4 h-20">Item 3</div>
        <div class="bg-green-500 p-4 h-20">Item 4</div>
        <div class="bg-green-300 p-4 self-baseline">Item 5</div>
        <div class="bg-green-500 p-4 h-20">Item 6</div>
    </div>
</body>

</html>
Print Page
Previous
Next