The flex-shrink property determines how much a flex item will shrink relative to other flex items when the container is too small to fit all items. The default value is 1, meaning items will shrink.
Example 1: Basic Shrinking
.flex-container {
display: flex;
width: 400px; /* Container is smaller than the combined width of items */
border: 1px solid #000;
}
.flex-item {
width: 200px;
height: 100px;
background-color: skyblue;
border: 1px solid #000;
}
.shrink-item {
flex-shrink: 2; /* This item will shrink more than others */
}
Explanation
When the .flex-container is not wide enough, .shrink-item will shrink at twice the rate of the other items because its flex-shrink value is 2, making it smaller.
Example 2: Proportional Shrinking
.flex-container {
display: flex;
width: 300px;
border: 1px solid #000;
}
.flex-item {
width: 150px;
height: 100px;
background-color: salmon;
border: 1px solid #000;
}
.item-1 {
flex-shrink: 1; /* Shrinks by one proportion */
}
.item-2 {
flex-shrink: 3; /* Shrinks three times as much as item-1 */
}
Explanation
Here, .item-2 will shrink three times as much as .item-1 when the container is overflowing. This demonstrates how flex-shrink distributes the negative space proportionally.
Example 3: Preventing Shrinking
.flex-container {
display: flex;
width: 350px;
border: 1px solid #000;
}
.flex-item {
width: 200px;
height: 100px;
background-color: palegreen;
border: 1px solid #000;
}
.no-shrink {
flex-shrink: 0; /* This item will not shrink and will overflow the container if necessary */
}
Explanation
By setting flex-shrink: 0, the .no-shrink item will maintain its original width even if the container is too small. This may cause the item to overflow its container.
Example 4: Equal Shrinking
.flex-container {
display: flex;
width: 250px;
border: 1px solid #000;
}
.flex-item {
width: 150px;
height: 100px;
background-color: gold;
border: 1px solid #000;
flex-shrink: 1; /* All items shrink equally, which is the default */
}
Explanation
With flex-shrink: 1 applied to all items, they will all shrink by the same amount when the container is smaller than their combined size. This ensures an even reduction in width across all items.
Example 5: Shrinking with Different Basis
.flex-container {
display: flex;
width: 400px;
border: 1px solid #000;
}
.flex-item {
height: 100px;
background-color: orchid;
border: 1px solid #000;
}
.item-a {
width: 300px;
flex-shrink: 1;
}
.item-b {
width: 200px;
flex-shrink: 1;
}
Explanation
Even with the same flex-shrink value, the amount of shrinkage is also influenced by the item's initial size. The larger item, .item-a, will shrink more in absolute terms than the smaller .item-b.
Example 6: Fractional Shrink Values
.flex-container {
display: flex;
width: 300px;
border: 1px solid #000;
}
.flex-item {
width: 200px;
height: 100px;
background-color: mediumseagreen;
border: 1px solid #000;
}
.one {
flex-shrink: 0.5; /* Shrinks at half the rate of the other item */
}
.two {
flex-shrink: 1;
}
Explanation
flex-shrink also accepts fractional values. In this scenario, .one will shrink less aggressively than .two because its shrink factor is smaller.
Example 7: Shrinking with Flex Wrap
.flex-container {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
width: 300px;
border: 1px solid #000;
}
.flex-item {
width: 200px;
height: 100px;
background-color: steelblue;
border: 1px solid #000;
flex-shrink: 1;
}
Explanation
When flex-wrap is set to wrap, items will move to the next line instead of shrinking if the container is too narrow. In this case, flex-shrink will have no effect as the items will wrap before they need to shrink.