Flex-shrink
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:
.container {
display: flex;
}
.item {
flex-shrink: 1;
}
Flex-shrink gives designers more flexibility over space, organization, and appearance, enabling various layouts and items to adapt to different devices and screen sizes.
Visit Webflow University for in-depth lessons on flexbox and all things CSS to customize your website.
