Tailwind CSS Align Self

This class accepts lots of values in tailwind CSS. It is the alternative to the CSS Align Self property. This class is used to control how an individual flex or grid item is positioned along its container's cross axis.

Align Self Classes:

• self-auto 
• self-start 
• self-end 
• self-center 
• self-stretch 

self-auto

This class is used to inherit its parent container align-items property or stretched if it has no parent container. It is a default value.

Syntax:

<element class="self-auto">...</element>

Example:

Output:

self-start

This class is used to align the selected item at the beginning of the flexible container.

Syntax:

<element class="self-start">...</element>

Example:

Output:

self-end

This class is used to align the selected item at the end of the flexible container.

Syntax:

<element class="self-end">...</element>

Example: 

Output:

self-center

This class is used to place the item at the center of the flexible container.

Syntax:

<element class="self-center">...</element>

Example:

Output:

self-stretch

This class is used to position the elements to fit the container.

Syntax:

<element class="self-stretch">...</element>

Example: 

Output: