CSS flex-grow Property

The flex-grow property specifies how much the item will grow relative to the rest of the items of the flex container. If all items of the container are specified by flex-grow factor, then all items share the available space.

The flex-grow property is used with flex-shrink and flex-basis properties.

If there are no flexible items, flex-grow property won't have any effect.

Initial Value 0
Applies to Flex items, including in-flow pseudo-elements.
Inherited No.
Animatable Yes. Items are animatable.
Version CSS3
DOM Syntax object.style.flexGrow = "3";

Syntax

flex-grow: number | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 2px solid #ccc;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 2;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .box div:nth-of-type(1) {flex-grow: 1;}
      .box div:nth-of-type(2) {flex-grow: 2;}
      .box div:nth-of-type(3) {flex-grow: 1;}
      .box div:nth-of-type(4) {flex-grow: 1;}
      .box div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Flex-grow property example</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

In the following example the blue item grows by 6px.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 2px solid #ccc;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 6;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .box div:nth-of-type(1) {flex-grow: 1;}
      .box div:nth-of-type(2) {flex-grow: 6;}
      .box div:nth-of-type(3) {flex-grow: 1;}
      .box div:nth-of-type(4) {flex-grow: 1;}
      .box div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Flex-grow property example</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

Values

Value Description
number Specifies how much the item will grow relative to the rest of the flexible items of the same container. Default value is 0.
initial Sets the property to its default value.
inherit Inherits this property from its parent element.




Related articles