📌 Introduction

The flex-shrink property controls how much a flex item will shrink relative to other items when there isn’t enough space in the flex container. It’s one of the 3 core item-sizing properties in Flexbox:flex-grow, flex-shrink, and flex-basis. Understanding flex-shrink helps you prevent unwanted element squishing in responsive layouts. 🧠✨

🎯 What Does flex-shrink Do?

✨ Syntax

selector {
  flex-shrink: <number>; /* default = 1 */
}

🧩 Accepted Values

1️⃣ flex-shrink: 1 (default)

The item can shrink when necessary.

flex-shrink: 1;

2️⃣ flex-shrink: 0

The item will NOT shrink — keeps its width at all costs.

flex-shrink: 0;

3️⃣ Higher Values (2,3,...)

Items with larger flex-shrink values shrink more compared to items with smaller values.

flex-shrink: 3;

🔥 Practical Examples

1. Prevent a Logo From Shrinking

.logo {
  flex-shrink: 0;
}

2. Make One Item Shrink More Than Others

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

3. Prevent Buttons From Squishing

.btn {
  flex-shrink: 0;
}

📊 How flex-shrink Works With Multiple Items

When items overflow their container, the browser subtracts width from items. It distributes shrinking proportional to the flex-shrink values.

🧪 Visual Example

.container {
  display: flex;
  width: 300px;
  gap: 10px;
}

.item {
  flex-basis: 150px;
  padding: 10px;
  background: #ddd;
}

.item:nth-child(1) { flex-shrink: 1; }
.item:nth-child(2) { flex-shrink: 0; }
.item:nth-child(3) { flex-shrink: 3; }

🧠 Tips & Best Practices

🎉 Conclusion

The flex-shrink property determines how flex items react when there isn’t enough space. With proper use, you can prevent important UI elements from collapsing and control which items should give up space first. Mastering flex-grow, flex-shrink, andflex-basis gives you complete command over Flexbox sizing. 🚀