The flex-grow property defines how much the item will grow. It moves together with the other flexible items in the same container.

Let us you remind that if there are no flexible items, flex-grow property won't have any effect.

Internet Explorer 10 and earlier versions do not support the flex-grow property.

CSS Syntax

flex-grow: number | initial | inherit;

Let's see an example:

<!DOCTYPE html>
          #color-container {
              width: 350px;
              height: 100px;
              border: 1px solid #c3c3c3;
              display: -webkit-flex; 
              display: flex;

            /* Safari 6.1+ */
           #color-container li:nth-of-type(1) {-webkit-flex-grow: 1;}
           #color-container li:nth-of-type(2) {-webkit-flex-grow: 3;}
           #color-container li:nth-of-type(3) {-webkit-flex-grow: 1;}
           #color-container li:nth-of-type(4) {-webkit-flex-grow: 1;}
           #color-container li:nth-of-type(5) {-webkit-flex-grow: 1;}

            /* Standard syntax */
           #color-container li:nth-of-type(1) {flex-grow: 2;}
           #color-container li:nth-of-type(2) {flex-grow: 10;}
           #color-container li:nth-of-type(3) {flex-grow: 1;}
           #color-container li:nth-of-type(4) {flex-grow: 4;}
           #color-container li:nth-of-type(5) {flex-grow: 1;}


       <ul id="color-container">
            <li style="background-color:red;"></li>
            <li style="background-color:pink;"></li>
            <li style="background-color:orange;"></li>
            <li style="background-color:purple;"></li>
            <li style="background-color:lightgreen;"></li>


Here is the result:

Property Values

Value Descriptions
number It defines that how much the item will grow. We give a number to define it. The default number is 0.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Related articles