CSS flex-grow Property

Subject: css

CSS flex-grow Property

The flex-grow property defines how much a flex item should grow relative to other items inside a flex container when extra space is available.

Why Use flex-grow?

  • Automatically scale items to fill available space
  • Distribute space proportionally among items
  • Avoid fixed widths in responsive design
  • Improve layout flexibility with fewer media queries

Syntax

🚀 Try it in Compiler

<number> is a unitless value, typically 0, 1, or any positive number.

How It Works

  • flex-grow: 0 (default) → item does not grow
  • flex-grow: 1+ → item grows based on proportion

When extra space is available, it's distributed according to the flex-grow value:

  • An item with flex-grow: 2 will take twice as much space as an item with flex-grow: 1

Example: Unequal Growth

🚀 Try it in Compiler

Explanation:

  • item1 gets 1 part of extra space
  • item2 gets 2 parts
  • item3 gets 3 parts

If 60% of space is available, distribution would be 10%, 20%, and 30% respectively.

Best Practices

  • Use flex-grow: 1 for equal item sizing
  • Use higher values to prioritize space allocation
  • Combine with flex-basis for better control
  • Always apply display: flex to the container

Common Use Cases

  • Responsive navbars
  • Dynamic card grids
  • Sidebars and flexible main content
  • Equal-height and variable-width layouts

Key Takeaways

  • flex-grow determines an item’s growth ratio
  • Default is 0 (no growth)
  • Higher values grow more relative to others
  • Only works if there is extra space in the container
  • Use for fluid, scalable, and responsive designs
Next: CSS Flex Shrink Property