Definition
The flex-shrink
CSS property is used in flexbox layouts to determine how flex items shrink in size when there is not enough space available along the main axis. It specifies the ability of a flex item to reduce its size relative to other items. The flex-shrink
property accepts a unitless value, typically a positive number.
For example, flex-shrink: 1;
means the item will shrink proportionally to other items if there is not enough space. If an item has a flex-shrink
value of 0
, it will not shrink at all, preserving its original size. The flex-shrink
property is helpful for creating flexible and responsive layouts where items adjust their size to accommodate different screen sizes and available space.