Open In App

Tailwind CSS Flex Shrink

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The CSS flexbox is a vital feature to develop the frontend, there is two flex-shrink available in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-shrink Property for the fast development of the front-end. This class specifies how much the item will shrink compared to other items inside that container. It defines the ability of an element to shrink in comparison to the other elements which are placed inside the same container.

Flex shrink :

  • flex-shrink-0
  • flex-shrink

flex-shrink-0: This class restricts the shrinking feature, it has the ability of an item to shrink compared to content present inside the same container.

Syntax:

<element class="flex-shrink-0"> Contents... </element>

Example:

HTML




<!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:

flex-shrink: This class does not restrict the shrinking feature. It has the ability of an item to shrink compared to the space left on the screen and get fits in that leftover space.

Syntax:

<element class="flex-shrink">..</element>

Example:

HTML




<!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>


Output:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads