CSS flex-shrink property
The flex-shrink property in CSS controls how a flex item should shrink relative to other flex items when there isn't enough space in the flex container. It is part of the Flexbox layout model and helps manage how flex items reduce in size to fit within the container.
Basic Syntax
selector {
flex-shrink: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 300px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
width: 150px; /* Fixed width to demonstrate shrinking */
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex-shrink: 1; /* This item will shrink proportionally */
}
.item-2 {
flex-shrink: 2; /* This item will shrink twice as much as item-1 */
}
.item-3 {
flex-shrink: 0; /* This item will not shrink */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>
</body>
</html>
In this example, the items within the flex container will shrink according to their flex-shrink values. Item 1 will shrink by a proportion of 1, Item 2 will shrink twice as much, and Item 3 will not shrink at all.
Values for flex-shrink
1. 0
- Description: The flex item will not shrink at all. It will maintain its original size, even if it overflows the container. This is useful when you want to ensure that certain items retain their size regardless of the available space.
- Use Case: Use this value for items that should not shrink under any circumstances.
.item {
flex-shrink: 0; /* Do not allow the item to shrink */
}
2. 1 or any positive number
- Description: The flex item will shrink in proportion to the value specified. If multiple items have different
flex-shrinkvalues, they will shrink according to their proportion relative to each other. A value of1means the item will shrink by a proportion of 1 relative to other items. - Use Case: Use this value when you want the item to shrink relative to others.
.item {
flex-shrink: 1; /* Allow the item to shrink equally with other items */
}
3. 2, 3, etc. (positive numbers)
- Description: The flex item will shrink in proportion to the value specified. For example, a value of
2means the item will shrink twice as much as an item with a value of1. - Use Case: Use this value to set a proportional shrink rate for the item compared to others.
.item {
flex-shrink: 2; /* Allow the item to shrink twice as much as items with flex-shrink: 1 */
}
Practical Examples
Example 1: No Shrinking
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 300px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
width: 150px; /* Fixed width to demonstrate shrinking */
height: 100%;
margin: 5px;
background-color: lightblue;
border: 1px solid blue;
}
.item-1 {
flex-shrink: 0; /* This item will not shrink */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, Item 1 will not shrink, causing it to overflow if the container's width is not sufficient.
Example 2: Proportional Shrinking
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 300px; /* Fixed width for demonstration */
height: 100px;
background-color: lightgray;
}
.item {
width: 150px; /* Fixed width to demonstrate shrinking */
height: 100%;
margin: 5px;
background-color: lightcoral;
border: 1px solid red;
}
.item-1 {
flex-shrink: 1; /* This item will shrink proportionally */
}
.item-2 {
flex-shrink: 2; /* This item will shrink twice as much as item-1 */
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
</div>
</body>
</html>
Here, Item 2 will shrink twice as much as Item 1 when there isn't enough space in the container.