Understanding `flex-grow` in Flexbox

The flex-grow property in Flexbox controls how much available space each item takes inside a container.

Basic Syntax

.item {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

In most cases, you’ll see the shorthand like this:

.item {
  flex: 1;
}

This is equivalent to:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

Example:

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
</div>

.container {
  display: flex;
}

.box1 {
  flex: 1;
  border: 1px solid white;
}

.box2 {
  flex: 2;
  border: 1px solid white;
}

.box3 {
  flex: 1;
  border: 1px solid white;
}

Box 1

Box 2

Box 3

Space is divided proportionally to the flex values: box1 gets 25%, box2 gets 50%, and box3 gets 25%.