What is flex-grow?

How to use flex-grow Property?

flex-grow is the property of the flex and flex is the part of the flexbox items.

Flex-grow means when we use flex grow property in any flexible container then its calculate all width and then divided to all container boxes, this is pure mathematics. Flex grow works with only on the remaining spaces as given below structures.

The default value of the flex-grow is 0.

Here is the flex-grow example:

<style>

.flexContainer {

  display: flex;

  border: 1px solid #ccc;

  width: 600px;

}

.flexContainer .innerElement  {

  background: #0bf;

  text-align: center;

  padding: 10px;

  margin: 1px;

  font-size:16px;

  color: #fff;

}

.flexContainer .innerElement.third  {

  -webkit-flex-grow:3;

  flex-grow:3;

}

.flexContainer .innerElement.two  {

  -webkit-flex-grow:1;

  flex-grow:1;

}

</style>

<div class="flexContainer">

  <h1 class="innerElement"><strong>1</strong></h1>

  <div class="innerElement two"><strong>2</strong></div>

  <span class="innerElement third"><strong>3</strong></span>

  <strong class="innerElement"><strong>4</strong></strong>

</div>

Note: Flex has a shorthand property for the flex-grow, flex-shrink, and flex-basis as given below example: