CSS flex-shrink property
Definition and Usage
The flex-shrink property is fixed in the same container, and the item shrinks relative to the other flexible items.
Note:The flex property is invalid if the element is not a flexible item.
See Also:
CSS Tutorial: CSS Flexible Box
CSS Reference Manual:flex Property
CSS Reference Manual:flex-basis Property
CSS Reference Manual:flex-direction Property
CSS Reference Manual:flex-flow Property
CSS Reference Manual:flex-grow Property
CSS Reference Manual:flex-wrap Property
HTML DOM Reference Manual:flexShrink Property
Example
Make the second flexible item shrink three times compared to the other items:
div:nth-of-type(2) {
flex-shrink: 3;
}
CSS Syntax
flex-shrink: number|initial|inherit;
Property Value
| Value | Description |
|---|---|
| number | A number that specifies the shrinkage of the item relative to the other flexible items. The default value is 1. |
| initial | Sets this property to its default value. See initial. |
| inherit | Inherits this property from its parent element. See inherit. |
Technical Details
| Default Value: | 1 |
|---|---|
| Inheritance: | No |
| Animation Creation: | Supported. See:Animation-related Properties. |
| Version: | CSS3 |
| JavaScript Syntax: | object.style.flexShrink="5" |
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
Numbers with -webkit- or -moz- prefixes indicate the first version using the prefix.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
