Tailwind CSS - Align Self

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.

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

    



    

        Tailwind CSS Self Auto Class
    
    

        
        
        
        
        
Item 1
        
Item 3
        
Item 3
        
Item 4
        
Item 5
        
Item 6
    

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

    



    

        Tailwind CSS Self Start Class
    
    

        
Item 1
        
Item 3
        
Item 3
        
Item 4
        
Item 5
        
Item 6
    

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

    



    

        Tailwind CSS Self End Class
    
    

        
Item 1
        
Item 3
        
Item 3
        
Item 4
        
Item 5
        
Item 6
    

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

    



    

        Tailwind CSS Self Center Class
    
    

        
Item 1
        
Item 2
        
Item 3
        
Item 4
        
Item 5
        
Item 6
    

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

    



    

        Tailwind CSS Self Stretch Class
    
    

        
Item 1
        
Item 3
        
Item 3
        
Item 4
        
Item 5
        
Item 6
    

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

    



    

        Tailwind CSS Self Baseline Class
    
    

        
Item 1
        
Item 2
        
Item 3
        
Item 4
        
Item 5
        
Item 6