CSS Flexbox - flex-shrink Property

CSS flex-shrink property specifies the flex shrink factor of a flex item. When the combined size of flex items is larger than the size of the flex container, the items will shrink proportionally based on their flex-shrink values.

The flex-shrink is commonly used with flex-grow and flex-basis, and usually defined using the flex shorthand.

Possible Values

  • <number> − Any valid positive number. Negative values are not valid.

Applies to

Flex items, including in-flow pseudo-elements.

Syntax

flex-shrink: <number>;

CSS flex-shrink - <number>

The following example demonstrates that flex-shrink: 2 property shrinks the flex items twice as compared to other flex items when there is not enough space in the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      width: 500px;
   }
   .flex-container div {
      background-color: yellow;
      padding: 5px;
      margin: 5px;
      height: 50px;
      flex-basis: 100px;
   }
   .flex-item {
      flex-shrink: 2;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div class="flex-item">Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
   </div>
</body>
</html>
Advertisements