Tailwind CSS Flex Shrink

The tailwind flex-shrink utility class allows you to control the shrink factor of flex items within a flex container. With Tailwind's flex-shrink class, you can easily adjust how flex items shrink along the main axis when there is not enough space available.

Applying Tailwind Flex Shrink

To apply tailwind flex shrink to a flex item, you can use the flex-shrink-{value} utility class, where {value} represents the desired shrink factor. The {value} can range from 0 to a positive integer, determining the proportion at which the flex item should shrink relative to other flex items.

<div class="flex">
  <div class="flex-shrink-0">Item 1</div>
  <div class="flex-shrink">Item 2</div>
  <div class="flex-shrink-2">Item 3</div>
</div>

Preview

In the above example, three flex items are placed within a flex container. The flex-shrink-0 class is applied to the first item, indicating that it should not shrink and maintain its original size. The flex-shrink class is applied to the second item, indicating that it can shrink along with other flex items if necessary. The flex-shrink-2 class is applied to the third item, indicating that it should shrink at twice the rate of the second item.

Responsive Tailwind Flex Shrink

Tailwind CSS allows you to apply flex shrink responsively at different breakpoints. To use responsive tailwind flex shrink classes, you can append the breakpoint prefix to the flex shrink class. For example, md:flex-shrink-2 applies a flex shrink value of 2 starting from the medium breakpoint and above.

<div class="flex">
  <div class="flex-shrink md:flex-shrink-0">Item 1</div>
  <div class="flex-shrink md:flex-shrink">Item 2</div>
  <div class="flex-shrink-2 md:flex-shrink-4">Item 3</div>
</div>

In the above example, the tailwind flex shrink behavior of the items is modified based on the breakpoints. The first item has a flex shrink value of 0 by default, but starting from the medium breakpoint and above (md:flex-shrink-0), it does not shrink. The second item has a flex shrink value of 1 by default, but starting from the medium breakpoint and above (md:flex-shrink), it can shrink. The third item has a flex shrink value of 2 by default, but starting from the medium breakpoint and above (md:flex-shrink-4), it can shrink at a higher rate.

Tailwind flex shrink class table

Windframe Tailwind blocks

footer

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.