Tailwind 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