Flex shrink property (flex-shrink)

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

Syntax:

selector {

flex-shrink: number | initial | inherit;

}

Values:

number - Determines the shrink size of the item in relation to other flexible items of same container. The value is expressed as a rate and the default value is 1.
initial or inherit

Example

Example of flex-shrink property:

<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    width:90%; height:90px; margin:15px 2px;
    color: #ffcc11; font-weight:bold;
    display: flex;
     display: -webkit-flex; /* Safari */
}
.flex {
    margin-top:10px; padding:2px;
    height:90px;
    background-color:#11ccff;  
}
div.flex:nth-of-type(3) {
   background-color:#ffcc11; color:#11ccff;
   flex-shrink: 4;
    -webkit-flex-shrink: 4;
}
p {
    margin-top:30px;
}
</style></head>

<body>

<div>
    <div class="flex">F1</div>
    <div class="flex">F2</div>
    <div class="flex">F3 (/4)</div>
    <div class="flex">F4</div>
</div>

<p>To ensure browser support, the proprietary selectors are used in styling</p>

</body>
</html>

›› go to examples ››

Flex shrink property (flex-shrink)

Syntax:

Values:

Example

Example of flex-shrink property:

Comments

About

Contact

Get Connected