CSS

CSS

🎯 CSS flex-grow Property

The flex-grow CSS property determines how much a flex item can expand compared to other items inside a Flexbox container.

When there is extra space available, flex-grow controls how that space is distributed among flex items.

πŸ”Ή Why Use flex-grow?

  • Benefits

  • πŸ“Œ Distributes available space automatically
  • πŸ“Œ Creates flexible and responsive layouts
  • πŸ“Œ Controls item proportions inside a Flexbox container
  • πŸ“Œ Eliminates the need for fixed widths in many layouts

πŸ”Ή flex-grow Values

  • number β†’ Defines the growth factor of a flex item
  • 0 β†’ The item will not grow
  • 1 β†’ The item shares available space equally with other items using the same value
  • 2, 3, 4... β†’ The item receives proportionally more space than items with smaller values
  • initial β†’ Resets to the default value (0)

🧩 Example: Equal Growth

CSS

.container {
    display: flex;
}

.item {
    flex-grow: 1;
}

In this example, all flex items share the remaining space equally because they have the same growth factor.

🧩 Example: Different Growth Ratios

CSS

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

Here, .item2 receives twice as much available space as .item1.

  • 🧠 Quick Summary

  • flex-grow controls how flex items expand when extra space is available.
  • A value of 0 prevents growth.
  • A value of 1 allows equal distribution of free space.
  • Larger values receive proportionally more available space.
  • It is one of the most important properties for creating flexible and responsive Flexbox layouts.
CSS flex-basis
CSS flex-shrink