Tailwind CSS - Flex

Previous
Quiz
Next

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.

Class CSS Properties
flex-1 flex: 1 1 0%;
flex-auto flex: 1 1 auto;
flex-initial flex: 0 1 auto;
flex-none flex: none;

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex 1
    </h2>
    <div class="flex">
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 1
        </div>
        <div class="flex-1 bg-green-500 p-4 w-56 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-1 bg-green-300 p-4 w-28 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Auto
    </h2>
    <div class="flex">
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 1
        </div>
        <div class="flex-auto bg-green-500 p-4 w-56 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-auto bg-green-300 p-4 w-28 mr-2
                    border-2 border-orange-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Initial
    </h2>
    <div class="flex">
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 1
        </div>
        <div class="flex-initial bg-green-500 p-4 w-56 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-initial bg-green-300 p-4 w-28 mr-2
                    border-2 border-orange-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-6">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex None
    </h2>
    <div class="flex">
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 1
        </div>
        <div class="flex-none bg-green-500 p-4 w-56 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-none bg-green-300 p-4 w-28 mr-2
                    border-2 border-orange-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next