The CSS flex-shrink attribute determines the extent to which a particular item can shrink compared to other items within the container. It defines the flex shrink ratio (a numerical value that indicates the item's shrinkage potential) of a flex item.
We have the option to allocate the negative space across the flex-items in a way where certain items absorb more negative space compared to others. This can be achieved by defining the flex-shrink property with a value of 2. Consequently, the flex-item assigned with flex-shrink: 2; will contract twice as much as the one with flex-shrink: 1;, meaning it will occupy double the amount of negative space compared to the others. Increasing the flex-shrink value results in that specific item shrinking more than the rest.
When allocating negative space, the flex shrink ratio is applied to the flex-basis, which represents the starting size of the element.
It specifically applies to the flex-items, meaning that if an element within the container is not a flex-item, the flex-shrink attribute will have no impact on that particular element. Typically, this particular CSS attribute is combined with other flex properties such as flex-grow and flex-basis, often specified using the flex shorthand to guarantee that all values are configured appropriately.
Syntax
flex-shrink: number| initial | inherit;
Values
It represents a positive value which dictates the flex shrink ratio. By default, it is set to 1, signifying that items do not shrink automatically. Negative values are not permitted. This parameter determines the extent to which the item can shrink in relation to other flexible items.
It assigns the default value to this property.
The property is inherited from its parent element.
Example
In this instance, there are a pair of containers, both containing five flex-items. The dimensions of the containers are set to 400px in width and 100px in height.
In the initial container, we set the flex-shrink property to 5 for the third element, flex-shrink property to initial for the fourth element, and flex-shrink property to inherit for the fifth element.
In the second container, we utilize flex-shrink: 8; for the second item, flex-shrink: 10; for the third item, and flex-shrink: 6; for the fourth item.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
border: 5px solid red;
display: flex;
background-color: blue;
margin: 30px;
}
.flex-item{
background-color: lightblue;
font-size: 25px;
margin: 5px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
</style>
</head>
<body>
<h1> Example of the flex-shrink property </h1>
<div class="container">
<div class = "flex-item"></div>
<div class = "flex-item"></div>
<div class = "flex-item" style = "flex-shrink: 5;"> 5 </div>
<div class = "flex-item" style = "flex-shrink: initial;"> initial </div>
<div class = "flex-item" style = "flex-shrink: inherit;"> inherit </div>
</div>
<div class="container">
<div class = "flex-item"></div>
<div class = "flex-item" style = "flex-shrink: 8;"> 8 </div>
<div class = "flex-item" style = "flex-shrink: 10;"> 10 </div>
<div class = "flex-item" style = "flex-shrink: 6;"> 6 </div>
<div class = "flex-item"></div>
</div>
</body>
</html>
Output
Let's explore a different instance of the flex-shrink attribute.
Example
In this instance, a container contains five flex-items. The dimensions of the container are set to 400px width and 100px height. We assign the flex-shrink property to two items to allow them to occupy a greater portion of the negative space compared to the remaining items. Each flex-item has a flex-basis value of 150px.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
padding: 10px;
display: flex;
background-color: lightblue;
}
.flex-item {
background-color: pink;
margin: 3px;
text-align: center;
font-size: 30px;
flex-basis: 150px;
flex-grow: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="flex-item" style = "flex-shrink: 3;"> 1 </div>
<div class="flex-item" > 2 </div>
<div class="flex-item" style = "flex-shrink: 5;" > 3 </div>
<div class="flex-item" > 4 </div>
<div class="flex-item" > 5 </div>
</div>
</body>
</html>
Output