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>

Click to view the demo