Skip to content
Related Articles

Related Articles

Improve Article
Tailwind CSS Flex Shrink
  • Last Updated : 08 Feb, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :