Logo
×

Tailwind CSS Flex Shrink

CSS flexbox is an important element for frontend development. There are two flex-shrink options in Tailwind CSS, and all properties are covered in class form. For quick front-end development, it's an alternative to the CSS flex-shrink Property. This class determines how much the item shrinks in comparison to other items in the container. It describes an element's ability to shrink in contrast to other items contained within the same container.

Flex shrink

The Flex shrink classes are as follows:

  1. flex-shrink-0
  2. flex-shrink

flex-shrink-0

This class disables the shrinking feature, which allows an item to shrink in comparison to other content in the same container.

Syntax:

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

Example:

The example for flex-shrink-0 is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>flex-shrink-0 Class of Tailwind </title>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>flex-shrink-0 Class - Tailwind CSS </b>
    <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12">
        <div class="rounded bg-red-600 flex-1 h-12 ">
            Side Part</div>
        <div class="rounded bg-red-300 flex-shrink-0 h-12">
            Flex-Shrink-0
        </div>
        <div class="rounded bg-red-600 flex-1 h-12 mr-12">
            Side Part</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Flex Shrink

flex-shrink

The shrinking functionality is unrestricted by this class. It allows an item to reduce in size in comparison to the available screen space and fit into that space.

Syntax:

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

Example

The example for flex-shrink is as follows:

<!DOCTYPE html>
<html>
   
<head>
    <title>flex-shrink Class of Tailwind </title>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>flex-shrink Class - Tailwind CSS </b>
    <div id="main" class="flex justify-evenly space-x-2 ml-12 mr-12">
        <div class="rounded bg-red-600 flex-grow w-16 h-12 ">
            Side Part</div>
        <div class="rounded bg-red-300 flex-shrink h-12">
            Flex-Shrink
        </div>
        <div class="rounded bg-red-600 flex-grow w-16 h-12">
            Side Part</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Flex Shrink

Related Topics

Tailwind CSS Stroke

This class accepts a lot of value, and all of the properties are covered in class form. It's the stroke class that goes on top of the SVG element. Stroke...

2 minutes read.

Tailwind CSS Grid Auto Rows

In tailwind CSS, this class takes multiple values and covers all of the properties in class form. It's a replacement for the grid-auto-rows CSS attribute. The size of the rows...

6 minutes read.

Tailwind CSS Justify Self

The class form goes over the various properties. It's a replacement for the CSS justify-self attribute. This class is used to describe the alignment of content’s position in a CSS...

4 minutes read.

Tailwind CSS Place Items

This class accepts a wide range of values. It's a replacement for the CSS Place Items property. This class is used to manage how things are justified while still being...

4 minutes read.

Tailwind CSS Max-Width

In tailwind CSS, this class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS max-width property. This...

3 minutes read.

Tailwind CSS Object Fit

It acknowledges more than one value in tailwind CSS. Every one of its properties is covered as in class form. It is the option in contrast to the CSS object-fit...

4 minutes read.

Tailwind CSS Overflow

The overflow class acknowledges more than one value in Tailwind CSS. It is an option in contrast to the CSS Overflow property. This overflow is for controlling how element content...

9 minutes read.

Tailwind CSS Place Self

The tailwind CSS Place self class accepts a wide range of values. It's a replacement for the CSS Place Items property. This class is used to manage how a single...

4 minutes read.

Tailwind CSS Grid Row Start / End

In tailwind CSS, this class takes several values. All of the attributes are covered in the form of a class. In CSS, it's an alternative to the grid-row attribute. It's...

4 minutes read.

Tailwind CSS Container

In Tailwind CSS, a compartment is utilized to fix the maximum width (max-width) of a component to match the min-width of the breakpoint. It comes exceptionally convenient when content must...

2 minutes read.

Tailwind CSS Grid Template Columns

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It's the CSS grid-template-columns property's replacement. It's used to specify the number...

2 minutes read.

Tailwind CSS Box Sizing

Tailwind CSS Box sizing class acknowledges more than one worth in tailwind CSS. Each property is shrouded as a class structure. It is an option in contrast to the CSS...

2 minutes read.

Tailwind CSS Top / Right / Bottom / Left

In tailwind CSS, these classes take a variety of values and cover all of the characteristics in the class form. These are the CSS Top/Right/Bottom/Left properties' replacements. These classes are...

4 minutes read.

Tailwind CSS Visibility

In tailwind CSS, this class accepts two values. It's a replacement for the CSS visibility property. This class specifies whether an element in a web document is visible or not,...

2 minutes read.

Tailwind CSS Order

One of the best features of Tailwind CSS is the Order class, which allows us to order flex and grid objects according to our needs. There are several different order...

2 minutes read.

Tailwind CSS Flex Wrap

CSS flexbox is an important component for frontend development. It is a front-end development alternative to the CSS flex-wrap Property. Note: You must include the flex class in your element before...

4 minutes read.

Tailwind CSS Float

The float class acknowledges more than one worth (value) in tailwind CSS. It is an option in contrast to the CSS float property. The float class characterizes the progression of...

4 minutes read.

Tailwind CSS Grid Template Rows

In tailwind CSS, this class accepts multiple values and all properties are covered in class form. It's the CSS grid-template-row property's replacement. It is used to set the number of...

2 minutes read.

Tailwind CSS Padding

This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Padding Property. This class is used...

4 minutes read.

Tailwind CSS Margin

The margin class accepts a large number of values, and all of the properties are covered in the same way they are in the class form. It's a replacement for...

6 minutes read.