CSS - flex-grow Property

Quiz

CSS flex-grow property determines how much extra space a flex item should take up in the flex container along its main axis. The elements must be flexible in order for the property to show its effect.

Syntax

flex-grow: number | initial | inherit;

Property Values

Value	Description
number	A number specifying how much the element will grow relative to other flex items. Default is 0.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Flex Grow Property

The following examples explain the flex-grow property with different values.

Flex Grow Property with Numeric Values

To let an element grow along the main axis relative to other flex items, we specify the growth factor in numeric values (e.g. 1,3,5 etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         padding: 5px;
         background-color: lightgray;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 10px;
         margin: 5px;
      }

      .flex-item1 {
         flex-grow: 1.5;
      }

      .flex-item2 {
         flex-grow: 3;
      }

      .flex-item3 {
         flex-grow: 2;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-grow property
   </h2>
   <h4>
      flex-grow: 1.5 (flex item1), 
      3 (flex item2), 2 (flex item3)
   </h4>
   <div class="flex-container">
      <div class="flex-item1">
         Flex item 1
      </div>
      <div class="flex-item2">
         Flex item 2
      </div>
      <div class="flex-item3">
         Flex item 3
      </div>
   </div>
</body>

</html>

Flex Grow Property with Initial Value

The initial value sets the growth factor to the default value which in this case is 0. So the items using this value will not grow. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         padding: 5px;
         background-color: lightgray;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 10px;
         margin: 5px;
      }

      .flex-item1 {
         flex-grow: initial;
      }

      .flex-item2 {
         flex-grow: 2;
      }

      .flex-item3 {
         flex-grow: initial;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-grow property
   </h2>
   <h4>
      flex-grow: 0 (flex item1), 
      2 (flex item2), 0 (flex item3)
   </h4>
   <div class="flex-container">
      <div class="flex-item1">
         Flex item 1
      </div>
      <div class="flex-item2">
         Flex item 2
      </div>
      <div class="flex-item3">
         Flex item 3
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
flex-grow	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

Print Page