CSS flex-shrink Property
The flex-shrink property defines how much the item will shrink inside the flex container. See some examples and try for yourself.
The flex-shrink property specifies how much the item will shrink relative to the rest of the items of the flex container. If the size of items is larger than the container, items shrink to fit the flex container. When flex-shrink property is not included in the flex shorthand declaration, the value is set to 1 by default. If there are no flexible items, flex-shrink property won't have any effect.
The flex-shrink property is one of the CSS3 properties.
The flex-shrink factor is multiplied by the flex-basis (or the item's content size if flex-basis is auto) when negative space is distributed.
| Initial Value | 1 |
|---|---|
| Applies to | Flex items, including in-flow pseudo-elements. |
| Inherited | No. |
| Animatable | Yes. Items are animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.flexShrink = "4"; |
Syntax
Syntax of CSS flex-shrink Property
flex-shrink: number | initial | inherit;Example of the flex-shrink property:
Example of CSS flex-shrink Property with number value
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px dotted #666666;
display: flex;
}
.box div {
flex-grow: 1;
flex-shrink: 3;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
flex-shrink: 7;
}
</style>
</head>
<body>
<h2>Flex-shrink property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Result
Values
| Value | Description | Play it |
|---|---|---|
| number | Specifies how much the item will shrink relative to the rest of the flexible items of the same container. Default value is 1. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits this property from its parent element. |
Practice
What is the function of the 'flex-shrink' property in CSS?