Tailwind CSS Tutorial

Tailwind CSS Tutorial Tailwind CSS Installation

Tailwind CSS Layout

Tailwind CSS Container Tailwind CSS Box Sizing Tailwind CSS Display Tailwind CSS Float Tailwind CSS Clear Tailwind CSS Object Fit Tailwind CSS Object Position Tailwind CSS Overflow Tailwind CSS Position Tailwind CSS Top/Right/Bottom/Left Tailwind CSS Visibility Tailwind CSS Z-index

Tailwind CSS Flex Box

Tailwind CSS Flex Direction Tailwind CSS Flex Wrap Tailwind CSS Flex Tailwind CSS Flex Grow Tailwind CSS Flex Shrink Tailwind CSS Order

Tailwind CSS Grid

Tailwind CSS Grid Template Columns Tailwind CSS Grid Column Start End Tailwind CSS Grid Template Rows Tailwind CSS Grid Row Start End Tailwind CSS Grid Auto Flow Tailwind CSS Grid Auto Columns Tailwind CSS Grid Auto Rows Tailwind CSS Gap

Tailwind CSS Alignment

Tailwind CSS Justify Content Tailwind CSS Justify Items Tailwind CSS Justify Self Tailwind CSS Align Content Tailwind CSS Align Items Tailwind CSS Align Self Tailwind CSS Place Content Tailwind CSS Place Items Tailwind CSS Place Self

Tailwind CSS Spacing

Tailwind CSS Padding Tailwind CSS Margin Tailwind CSS Space Between

Tailwind CSS Sizing

Tailwind CSS Width Tailwind CSS Min-Width Tailwind CSS Max-Width Tailwind CSS Height Tailwind CSS Min-Height Tailwind CSS Max-Height

Tailwind CSS Effects

Tailwind CSS Box Shadow Tailwind CSS Opacity

Tailwind CSS SVG

Tailwind CSS Fill Tailwind CSS Stroke Tailwind CSS Stroke Width

Tailwind CSS Flex Shrink
2022-03-27 15:42:01

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