Property flex-grow

Specifies how much the item will grow
relative to the rest.

The value of flex-grow only accepts an integer
number.

The flex items width will with flex-grow: 1
being used, the available space was distributed
between them.

Since the flex-grow property accepts integer
values, it’s possible to use 0 as a way to
prevent a flex item from taking the available
space.

Flex grow doesn’t make flex items equal

There is a common misconception that using
flex-grow will make the items equal in width.
This is incorrect. The idea of using
flex-grow is to distribute the available space.

Example

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-grow: 1;
}