CSS flex-shrink property
The flex-shrink property in CSS is identified for setting the flex shrink factor of a particular flex item. In case the size of all the flex items are larger than the flex container, then the items shrink in order to fit in according to the flex-shrink.
In use, the flex-shrink property is used along with the other flex properties like the flex-grow and flex-basis property and is normally defined using the flex shorthand.
Syntax for flex-shrink property
Following is the syntax for the flex-shrink property.
flex-shrink: number| initial| inherit;
Example: CSS flex-shrink property
In the example below, we are using the flex-shrink property with different border styles, colors, and their different values. In this case, we have given the flex-shrink property value as 1 and 2.
<!DOCTYPE html>
<html>
<head>
<title>The flex-shrink property in CSS</title>
<style type="text/css">
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid purple;
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
</style>
</head>
<body>
<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>
Output:
Example 2: CSS flex-shrink property
Here in the example below, we are using the flex-shrink property with different border styles, colors, and different values. In this case, we have given the flex-shrink property value as 0.
<!DOCTYPE html>
<html>
<head>
<title>The flex-shrink property in CSS</title>
<style type="text/css">
#content {
display: flex;
width: 400px;
}
#content div {
flex-basis: 110px;
border: 3px solid purple;
}
.box {
flex-shrink: 0;
}
.box1 {
flex-shrink: 0;
}
</style>
</head>
<body>
<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:purple;">D</div>
<div class="box1" style="background-color:gray;">E</div>
</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
29 |
29 |
| Edge |
12 |
12 |
| Firefox |
20 |
20 |
| Internet Explorer |
10 |
10 |
| Opera |
12.1 |
12.1 |
| Safari |
9 |
9 |
| Webview Android |
4.4 |
4.4 |
| Chrome Android |
29 |
29 |
| Firefox Android |
20 |
20 |
| Opera Android |
12.1 |
12.1 |
| IOS Safari |
9 |
9 |
| Samsung Internet |
2.0 |
2.0 |
Conclusion
The initial value for the flex-shrink property in CSS is one. This property is applicable to the flex items which includes in-flow pseudo elements also. It is not an inherited property. The computed value for this property is the as specified one. The animation type for this property is a number.
