CSS flex-shrink Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The flex-shrink property in CSS is part of the Flexible Box Layout Module (Flexbox). It specifies the shrink factor of a flex item, which determines how much the item will shrink relative to the rest of the flex items in the flex container when there is not enough space.

This property is essential for controlling the responsiveness and layout behavior of flex items.

💡 Syntax

The syntax for the flex-shrink property is straightforward. It is applied to flex items within a flex container.

Syntax

Copied

element {
  flex-shrink: number;
}

Here, number is a non-negative integer that specifies the shrink factor.

🎛️ Default Value

The default value of the flex-shrink property is 1. This means that flex items will shrink proportionally when the flex container has insufficient space.

🏠 Property Values

Value	Description
number	A non-negative integer that represents the shrink factor of the flex item. A value of 0 means the item will not shrink, while a higher value indicates a greater tendency to shrink.

📄 Example

In this example, we'll demonstrate how the flex-shrink property affects flex items when the flex container is too small to fit all items.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS flex-shrink Example</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      background-color: lightgrey;
    }
    .item {
      flex: 1;
      padding: 10px;
      background-color: cornflowerblue;
      margin: 5px;
      color: white;
      text-align: center;
    }
    .item:nth-child(2) {
      flex-shrink: 2;
    }
  </style>
</head>
<body>
  <h1>Flexbox flex-shrink Property</h1>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

In this example, "Item 2" has a flex-shrink value of 2, meaning it will shrink twice as much as "Item 1" and "Item 3" when the container's width is insufficient.

🖥️ Browser Compatibility

The flex-shrink property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is widely used and considered stable for use in production environments.

🎉 Conclusion

The flex-shrink property is a powerful tool for controlling the layout behavior of flex items within a flex container.

By adjusting the shrink factor, you can create flexible and responsive designs that adapt to different screen sizes and container widths. Experiment with different flex-shrink values to see how they affect the distribution of space in your flex layouts.