Tailwind Flex Shrink
This article will mainly center around Tailwind Flex shrink property, along with examples.
The shrink class in Tailwind CSS allows you to control how much an element should shrink inside a Flexbox layout.
By setting the flex-shrink CSS property, you can specify how much an element should shrink relative to its siblings when there’s not enough space in the container.
The value of the flex-shrink property is a number that represents the element’s shrink factor.
Tailwind Flex Shrink Classes
| Classes | Overview |
| shrink-0 | Using this class, you can set the flex-shrink property of a flex item to 0. |
| shrink | This class allows you to set the flex-shrink property of a flex item to 1. |
Tailwind flex-shrink-0
The shrink-0 class in Tailwind CSS is used to prevent an element from shrinking and taking less space available inside a Flexbox layout.
Syntax
<element class="flex-shrink-0"> Contents....</element>
This example demonstrates the usage of shrink-0 in Tailwind:
Example:
Tailwind flex-shrink
This sets the shrink value to 1, which means that the flex items will shrink proportionally when there is not enough space in the container.
Syntax
<element class="flex-shrink">....</element>
This example focuses on exploring the shrink class in Tailwind:
