Tailwind CSS - Flex Shrink

Previous
Quiz
Next

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

Tailwind CSS Flex Shrink Classes

The following is the list of Tailwind CSS Flex Shrink Classes that specifies the shrinking behavior of flex items.

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

Functionality of Tailwind CSS Flex Shrink

  • shrink: This class replaces the CSS flex-shrink: 1; property. This class enables flex items to shrink as per the need.
  • shrink-0: This class replaces the CSS flex-shrink: 0 property. This class doesn't allow flex items to shrink.

Tailwind CSS Flex Shrink Class Examples

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

Allow Flex Item to Shrink

Here in this example, we will set a shrink class on an item that lets the item to Shrink if needed.

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 Shrink
    </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="shrink 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-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>

Prevent Flex Item From Shrinking

To prevent any item from shrinking we can use the shrink-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 Shrink 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="shrink-0 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-16 mr-2
                    border-2 border-green-800 rounded">
            Flex Item 3
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next