Tailwind CSS Align Self

The Tailwind CSS align-self utility allows us to align individual flex items along the cross-axis within a flex container. It sets the alignment for a single flex item, overriding the default alignment set by the container.

Syntax

Here's the basic syntax for using the align-self utility:

<div class="align-self-{value}"></div>

• {value}: This value determines how the flex item should align itself along the cross-axis. It can be one of the following:

  • auto: The default value. The flex item will inherit the align-items property of its parent container.
  • start: The flex item will align itself to the start of the cross-axis.
  • end: The flex item will align itself to the end of the cross-axis.
  • center: The flex item will align itself to the center of the cross-axis.
  • stretch: The flex item will be stretched to fill the entire cross-axis.

Example

Let's see align-self in action with an example:

<div class="flex flex-wrap justify-center">
  <div class="bg-blue-200 p-4 m-2 w-32 h-32 align-self-start">1</div>
  <div class="bg-blue-300 p-4 m-2 w-32 h-32 align-self-center">2</div>
  <div class="bg-blue-400 p-4 m-2 w-32 h-32">3</div>
</div>

In this example, we have a flex container with three flex items. The first flex item has a class of align-self-start, the second flex item has a class of align-self-center, and the third flex item will inherit the align-items property of its parent container.

Output

Here's what the output of the example above will look like:

Explanation

In the example above, we have used the align-self utility to align each flex item along the cross-axis of the flex container.

The first flex item has a class of align-self-start, which will align it to the start of the cross-axis. The second flex item has a class of align-self-center, which will align it to the center of the cross-axis. Finally, the third flex item will inherit the align-items property of its parent container.

Use

The align-self utility is particularly useful when we want to align individual flex items differently than the rest of the items in the container. We can use it to override the default alignment set by the container and align flex items exactly as we want.

Important Points

• The align-self utility applies only to individual flex items, and not to the container itself.
• The align-self property only works on flex items. If an element is not a flex item, this property will have no effect.

Summary

The align-self utility in Tailwind CSS allows us to align individual flex items along the cross-axis within a flex container. It sets the alignment for a single flex item, overriding the default alignment set by the container. We can use it to align individual flex items differently than the rest of the items in the container, and we can choose from several possible alignment values, such as start, end, center, and stretch.