Tailwind CSS - Flex

---

---

Tailwind CSS Flex is a utility class that specifies how flex items both grow and shrink within a flex container.

Tailwind CSS Flex Classes

The following is the list of Tailwind CSS Flex classes that specifies the expanding and shrinking behavior of flex items.

Functionality of Tailwind CSS Flex

• flex-1: This class replaces the CSS flex: 1 1 0%; property. This class enables flex items to grow and shrink as per the need while ignoring their initial size.
• flex-auto: This class replaces CSS flex: 1 1 auto; property. This class enables flex items to grow and shrink while keeping account of their initial size.
• flex-initial: This class replaces the CSS flex: 0 1 auto; property. This class enables flex items to shrink but not grow, still taking into account their initial size.
• flex-none: This class replaces CSS flex: none; property. This class doesn't allow flex items to grow or shrink.

Tailwind CSS Flex Class Examples

The following examples will illustrate the Tailwind CSS Flex class utility.

Allow Flex Item to Grow of shrink as Needed

To allow any Flex item to grow or shrink as much as it's needed, we can use theflex-1 class, which will ignore its initial size.

Example

    



    

        Tailwind CSS Flex 1
    
    

        

            Flex Item 1
        
        

            Flex Item 2
        
        

            Flex Item 3
        
    

Allow Flex Item to Grow or Shrink

If we use flex-auto class on each item, then we can allow each flex-item to grow or shrink based on screen size.

Example

    



    

        Tailwind CSS Flex Auto
    
    

        

            Flex Item 1
        
        

            Flex Item 2
        
        

            Flex Item 3
        
    

Allow Flex Item to Shrink but not Grow

If we use flex-initial class on any child element, then we are allowing that item to shrink but restricting it to not grow based on screen size.

Example

    



    

        Tailwind CSS Flex Initial
    
    

        

            Flex Item 1
        
        

            Flex Item 2
        
        

            Flex Item 3
        
    

Prevent Flex Item from Growing or Shrinking

By using flex-none class, we can prevent flex items from growing and shrinking based on screen size changes.

Example

    



    

        Tailwind CSS Flex None
    
    

        

            Flex Item 1
        
        

            Flex Item 2
        
        

            Flex Item 3