CSS Property flex-shrink
The flex-shrink property is a
property of the Flexible Box Layout.
The flex-shrink property
sets how to shrink the element relative to the rest of
the flexible items inside the same container.
The flex-shrink property sets
a number,
which determines how much the flex item will shrink relative to
the rest of the flex items in the same flex container
when there isn't enough space on the row.
When omitted, the flex-shrink property is
set to 1.
Summary
- Initial value
- 1
- Inherited
- no
- CSS Version
- CSS3
- JavaScript syntax
- object.style.flexShrink="5"
- Animatable
- yes
CSS Syntax
flex-shrink: number|initial|inherit;
Property Values
- number
- A unitless number sets how much to shrink an element relative to the rest of the flexible items. Default value is 1
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
flex-shrink |
Yes | 11.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
#main {<!-- w ww . j ava 2s. c o m-->
width: 350px;
height: 100px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
-webkit-flex-grow: 1; /* Safari 6.1+ */
-webkit-flex-shrink: 1; /* Safari 6.1+ */
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
#main div:nth-of-type(2) {
-webkit-flex-shrink: 2; /* Safari 6.1+ */
flex-shrink: 2;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:ree;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:tomato;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:grey;"></div>
</div>
</body>
</html>