CSS flex-shrink property specifies how much a flex item should shrink compared to the other items if enough space is not available.
By default, the flex-shrink property is set to 1. which means that all the flex items will shrink equally if enough space is not available.
In the example below, the second flex item has flex-shrink:3; . This means that this item will shrink 3 times faster than the other flex items if enough space is not available.
Example:
#item2{
flex-shrink: 3;
}
If the flex-shrink property is set to 0 for any flex item, it will not shrink even if enough space is not available. Therefore, a horizontal scroll bar will be added to the webpage.
In the example below, the second flex item is set to flex-shrink:0;. Therefore, it will not shrink. Only the first and third items will shrink if there is no enough space.
Example:
#item2{
flex-shrink: 0;
}
As the flex-shrink property is relative in nature. So, if you set the same non-zero value of the flex-shrink property for all the flex items, all these items will shrink equally if enough space is not available. See the example below:
Example:
#item1{
flex-shrink: 5;
}
#item2{
flex-shrink: 5;
}
#item3{
flex-shrink: 5;
}
CSS Syntax
The flex-shrink property has the following syntax:
flex-shrink: number|initial|inherit;
Property Values
The flex-shrink property accepts the following values:
| number | Defines how much should a flex item should shrink compared to the other flex items if enough space is not available. It can be a decimal or integer value. The default value is 1, which indicates that all the flex items will shrink equally if there is not enough space. Negative values are not allowed. |
| initial | Sets the flex-shrink property to its default value(1). |
| inherit | Inherits the flex-shrink property from the parent element. |
General Info
| Default Value | 1 |
| Inherited | No |
| JavaScript Usage | element.style.flexShrink = “3” |
