The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element. It determines how much an item in a flex parent should be reduced when the available space is less than the combined size of all the items.
The command “flex-shrink: <number>” specifies the proportion of reduction. The value must be positive — the higher the number, the more it shrinks.
For example, if a flex container is 300 pixels wide and has three items with a value of 1 and widths of 100 pixels, it has enough space to fit all three items. If the flex parent shrinks to 250 pixels, the items will overlap. Using “flex-shrink,” the items reduce in size, and the flex parent can fit all three. Here’s what the code looks like:
Flex-shrink gives designers more flexibility over space, organization, and appearance, enabling various layouts and items to adapt to different devices and screen sizes.
Get the best, coolest, and latest in design and no-code delivered to your inbox each week.