CSS Flex Grow

CSS CODES & EXAMPLES

CSS Flex Grow

Learn how the CSS flex-grow property controls how flex items expand and share available space inside a flex container.

← CSS Align Self Start Learning →

What is Flex Grow?

Control how flex items use extra space

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

Remember: flex-grow works when the flex container has extra available space along its main axis.

Syntax

Basic flex-grow syntax

flex-grow.css

.item {
  flex-grow: 1;
}

The default value of flex-grow is 0.

flex-grow: 0

Default behavior

When flex-grow is 0, the flex item does not grow to consume extra available space.

grow-zero.css

.container {
  display: flex;
}

.item {
  flex-grow: 0;
}

Item 1

Item 2

Item 3

flex-grow: 1

Allow an item to grow

When one item has flex-grow: 1, it can take the available extra space.

grow-one.css

.container {
  display: flex;
}

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

2 — flex-grow: 1

All Items with flex-grow: 1

Share available space equally

If every item has the same flex-grow value of 1, the available extra space is distributed equally among them.

equal-grow.css

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

Grow 1

flex-grow: 1 vs 2

Different growth ratios

A value of 2 does not mean the item becomes exactly twice as wide as another item. It means that the item receives twice the share of the available extra space.

flex-grow: 1, 2 and 3

Multiple growth ratios

Multiple flex items can have different grow factors. The extra space is divided according to their grow values.

multiple-ratios.css

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

.item-two {
  flex-grow: 2;
}

.item-three {
  flex-grow: 3;
}

Flex Grow with Flex Basis

Understand the starting size

flex-grow distributes extra space after the flex items’ initial sizes are considered. The flex-basis property can define that initial size.

basis-grow.css

.item {
  flex-basis: 150px;
  flex-grow: 1;
}

Basis 150px + Grow 1

Flex Shorthand

Combine grow, shrink and basis

The flex shorthand can combine flex-grow, flex-shrink, and flex-basis.

flex-shorthand.css

.item {
  flex: 1 1 200px;
}

Meaning: 1 = flex-grow, 1 = flex-shrink, 200px = flex-basis.

Practical Website Example

Responsive course cards

Flex grow is useful when creating responsive navigation, course cards, pricing layouts, buttons and content sections.

course-layout.css

.course-layout {
  display: flex;
  gap: 15px;
}

.course-info {
  flex-grow: 1;
}

.course-button {
  flex-grow: 0;
}

CSS

Complete CSS Course

Learn selectors, box model, Flexbox, Grid and responsive web design.

Enroll

Responsive Navigation Example

Let one element occupy remaining space

navbar.css

.navbar {
  display: flex;
  align-items: center;
}

.logo {
  flex-grow: 0;
}

.search {
  flex-grow: 1;
}

.login {
  flex-grow: 0;
}

Flex Grow vs Width

Do not confuse these properties

Property	Purpose
`width`	Sets an element’s preferred width.
`flex-grow`	Controls how an item receives available extra space in a flex container.
`flex-basis`	Defines the initial main-size of a flex item.