CSS - flex-shrink Property

Quiz

CSS flex-shrink property controls how flex items shrink relative to each other when there is not enough space in the flex container. The elements must be flexible in order for the property to show its effect.

Syntax

flex-shrink: number | initial | inherit;

Property Values

Value	Description
number	A number specifying how much the element will shrink relative to other flex items. Default is 1.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Flex Shrink Property

The following examples explain the flex-shrink property with different values.

Flex Shrink Property with Numeric Values

To let an element shrink relative to other flex elements when there is not enough space in the container, we can specify the shrink factor in numeric values (e.g. 2,3,4 etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgray;
         width: 100%;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 5px;
         margin: 5px;
         height: 50px;
         flex-basis: 100px;
      }

      .flex-item1 {
         flex-shrink: 3;
      }

      .flex-item2 {
         flex-shrink: 4.5;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-shrink property
   </h2>
   <h4>
      flex-shrink: 3 (flex item2, flex item4),
      4.5 (flex item6)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div class="flex-item1">
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
      <div class="flex-item1">
         Flex item 4
      </div>
      <div>
         Flex item 5
      </div>
      <div class="flex-item2">
         Flex item 6
      </div>
   </div>
</body>

</html>

Flex Shrink Property with Initial Value

The initial value sets the shrink factor to the default value which in this case is 1. So the items using this value will shrink proportionately. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgray;
         width: 100%;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 5px;
         margin: 5px;
         height: 50px;
         flex-basis: 100px;
      }

      .flex-item1 {
         flex-shrink: initial;
      }

      .flex-item2 {
         flex-shrink: 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-shrink property
   </h2>
   <h4>
      flex-shrink: initial (flex item2, flex item4),
      4 (flex item6)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div class="flex-item1">
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
      <div class="flex-item1">
         Flex item 4
      </div>
      <div>
         Flex item 5
      </div>
      <div class="flex-item2">
         Flex item 6
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
flex-shrink	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

Print Page