Tailwind CSS - Flex Grow

Previous
Quiz
Next

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

Tailwind CSS Flex Grow Classes

The following is the list of Tailwind CSS Flex Grow classes that specifies the expanding or growing behavior of flex items.

Class CSS Properties
grow flex-grow: 1;
grow-0 flex-grow: 0;

Functionality of Tailwind CSS Flex Grow

  • grow: This class replaces the CSS flex-grow: 1; property. This class enables flex items to grow and fill the available space.
  • grow-0: This class replaces the CSS flex-grow: 0; property. This class does't allow flex items to grow.

Tailwind CSS Flex Grow Class Examples

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

Allow Flex Item to Grow

Here in this example, we will set a grow class on an item that lets the item grow to fill any available space.

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 Grow
    </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="grow bg-green-500 p-4 w-48 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

Prevent Flex Item From Growing

To prevent any item from growing, we can use the grow-0 class.

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 Grow 0
    </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="grow-0 bg-green-500 p-4 w-48 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 2
        </div>
        <div class="flex-none bg-green-300 p-4 w-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next