Tailwind CSS Flex Shrink

Last Updated : 24 Sep, 2024

Tailwind CSS Flex Shrink provides utilities to control the shrinking of flex items.

Syntax:

class= "flex-shrink-0"

Flex shrink Values:

flex-shrink-0: This class is used to prevent the shrinking of an element.
flex-shrink: This class is used to shrink an element.

Example 1: This example shows the usage of the Tailwind CSS flex-shrink-0 class.

<!DOCTYPE html> 
<html>

<head> 
    <title>Tailwind flex-shrink-0 Class</title> 

    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 

    <b>Tailwind CSS flex-shrink-0 Class</b> 

    <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12"> 
        <div class="rounded bg-green-600 flex-1 h-12 ">
            Side Part</div> 
        <div class="rounded bg-green-300 flex-shrink-0 h-12">
            Flex-Shrink-0
        </div> 
        <div class="rounded bg-green-600 flex-1 h-12 mr-12">
            Side Part</div> 
    </div> 
</body> 

</html>

Output:

Example 2: This example shows the usage of the Tailwind CSS flex-shrink class.

<!DOCTYPE html>
<html>
 
<head> 
    <title>Tailwind flex-shrink Class</title> 

    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 

    <b>Tailwind CSS flex-shrink Class</b> 

    <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12"> 
        <div class="rounded bg-green-600 flex-grow w-16 h-12 ">
            Side Part</div> 
        <div class="rounded bg-green-300 flex-shrink h-12">
            Flex-Shrink
        </div> 
        <div class="rounded bg-green-600 flex-grow w-16 h-12">
            Side Part</div> 
    </div> 
</body> 

</html>