Open In App

Tailwind CSS Flex Shrink

Last Updated : 23 Jul, 2025
Suggest changes
Share
4 Likes
Like
Report

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.

HTML 
<!DOCTYPE html> <html> <head> <title>Tailwind flex-shrink-0 Class</title> <link href= "https://unpkg.com/tailwindcss@1.9.6/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.

HTML 
<!DOCTYPE html> <html> <head> <title>Tailwind flex-shrink Class</title> <link href= "https://unpkg.com/tailwindcss@1.9.6/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>

Output:


S
skyridetim
Article Tags :

Explore

Lightbox