CSS flex-shrink Property
Example
A, B, C are set to flex-shrink: 1, and D, E are set to flex-shrink: 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
<style>#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}</style>
</head>
<body>
<p>The total width of the div is 500px, with a flex-basis of 120px.</p>
<p>A, B, C are set to flex-shrink: 1. D, E are set to flex-shrink: 2</p>
<p>D and E have different widths compared to A, B, C</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>
Example Analysis:
The default value for flex-shrink is 1. If this property is not explicitly defined, it will automatically default to 1 and calculate the ratio for space shrinking after all factors are added together.
In this example, A, B, C are explicitly defined with flex-shrink of 1, and D, E are defined with flex-shrink of 2. Therefore, the remaining space is divided into 7 parts in total, with A, B, C taking 1 part each, and D, E taking 2 parts each, i.e., 1:1:1:2:2.
We can see that the parent container is defined as 500px, and the child items are defined as 120px each, totaling 600px, which exceeds the parent container by 100px. This excess 100px needs to be absorbed by A, B, C, D, E through the shrink factors. Therefore, the weighted total is 100*1 + 100*1 + 100*1 + 100*2 + 100*2 = 700px.
A's overflow removal: (100*1/700)*100, which is approximately 14px
B's overflow removal: (100*1/700)*100, which is approximately 14px
C's overflow removal: (100*1/700)*100, which is approximately 14px
D's overflow removal: (100*2/700)*100, which is approximately 28px
E's overflow removal: (100*2/700)*100, which is approximately 28px
Finally, the actual widths of A, B, C, D, E are: 120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px, 120-28=92px, respectively. Additionally, these widths include the borders.
Browser Support
The numbers in the table indicate the first browser version that supports the property.
The numbers following -webkit-, -ms-, or -moz- indicate the first version that supports the prefixed property.
| Property | |||||
|---|---|---|---|---|---|
| flex-shrink | 29.0 <br>21.0 -webkit- | 11.0 <br>10.0 -ms- | 28.0 <br>18.0 -moz- | 9.0 <br>6.1 -webkit- | 17.0 |
Definition and Usage
The flex-shrink property specifies the shrink rules for flex items. Flex items will only shrink if their combined default widths exceed the container, and the amount they shrink is based on the value of flex-shrink.
Note: If the element is not a flex container item, the flex-shrink property will not take effect.
| Default value: | 1 |
|---|---|
| Inherited: | No |
| --- | --- |
| Animatable: | Yes. See Animatable Try it |
| --- | --- |
| Version: | CSS3 |
| --- | --- |
| JavaScript Syntax: | object.style.flexShrink="5" Try it |
| --- | --- |
CSS Syntax
Property Values
| Value | Description |
|---|---|
| number | A number specifying how much the item will shrink relative to the rest of the 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 |
Related Articles
CSS Reference: flex Property
CSS Reference: flex-basis Property
CSS Reference: flex-direction Property
CSS Reference: flex-flow Property
CSS Reference: flex-grow Property
CSS Reference: flex-wrap Property