🌱 CSS Tutorial: flex-grow

📌 Introduction

The flex-grow property determines **how much a flex item should grow relative to the other items** inside the same flex container. It is one of the core properties that make Flexbox powerful, enabling fully responsive layouts with dynamic width distribution. 🌟

🎯 What Does flex-grow Do?

  • Controls how much available space a flex item occupies
  • A value of 0 means the item will NOT grow
  • A value of 1 or more allows the item to grow
  • Works only inside a display: flex or display: inline-flex container

✨ Syntax

Syntax

selector {
  flex-grow: <number>;
}

Note

Default value = 0, meaning items do not grow unless specified.

🧩 How flex-grow Works

When there is **free space** inside a flex container, flex-grow values determine how that free space should be divided among flex items.

Example

.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 3; }

This means:item3 grows 3× more than item1 and 1.5× more than item2.

🔥 Practical Examples

1. All Items Grow Equally

Equal Growth

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

2. One Item Grows More Than Others

Unequal Growth

.container {
  display: flex;
}

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

3. A Single Growing Item

Single Grow

.container {
  display: flex;
}

.item {
  flex-grow: 0; /* default */
}

.item.grow {
  flex-grow: 1;
}

4. Responsive Navigation Layout

Responsive Nav

.nav {
  display: flex;
}

.nav-item {
  flex-grow: 1;
  text-align: center;
}

5. Grow + Basis Combination

flex-grow is most powerful when combined with flex-basis.

Grow + Basis

.item {
  flex: 1 1 200px;  /* flex-grow flex-shrink flex-basis */
}

📊 flex-grow Comparison Table

ValueMeaning
0The item will NOT grow
1Item grows to fill remaining space
2, 3, …Grows proportionally more than other items

🧠 Tips & Best Practices

  • Use flex-grow: 1 for equal flexible layouts
  • Use higher numbers to give priority to specific items
  • Use flex: 1 shorthand → means flex-grow: 1
  • Be careful with fixed-width items — they won’t grow if width is forced
>>“Flex-grow turns rigid layouts into fluid, responsive designs.” ✨

🎉 Conclusion

The flex-grow property is one of the most powerful tools in Flexbox for creating responsive and dynamic layouts. Once you understand how items share leftover space, you can build headers, cards, navbars, sidebars, and full-page layouts effortlessly. Master flex-grow → and flexible UI becomes EASY. 🚀