CSS flex-grow

The CSS flex-grow property is used to grow (increase the width of) flex items relatively, in the same flex container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown;}
      .container > div{padding: 12px; border: 1px solid coral; color: wheat;}
      .container div:nth-of-type(1) {flex-grow: 1;}
      .container div:nth-of-type(2) {flex-grow: 2;}
      .container div:nth-of-type(3) {flex-grow: 1;}
      .container div:nth-of-type(4) {flex-grow: 1;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

In above example, the flex container divided into 1+2+1+1 or 5 parts, the second DIV element gets two parts, and other three DIVs gets one-one part each.

CSS flex-grow Example

The syntax of flex-grow property in CSS, is:

flex-grow: x;

The value of x should be any of the following:

number - a number like 1, 2, 3, 4, etc. is used to define the relative size/width of flex items. The default value is 0.
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS flex-grow Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a, .b, .c, .d, .e{display: flex; background-color: brown; text-align: center;}
      .a > div, .b > div, .c > div, .d > div, .e > div{padding: 12px; border: 1px solid coral; color: wheat;}
      .a div:nth-of-type(1) {flex-grow: 1;}
      .a div:nth-of-type(3) {flex-grow: 1;}
      .a div:nth-of-type(4) {flex-grow: 1;}

      .b div:nth-of-type(1) {flex-grow: 1;}
      .b div:nth-of-type(2) {flex-grow: 1;}
      .b div:nth-of-type(3) {flex-grow: 1;}
      .b div:nth-of-type(4) {flex-grow: 1;}

      .c div:nth-of-type(1) {flex-grow: 1;}
      .c div:nth-of-type(2) {flex-grow: 2;}
      .c div:nth-of-type(3) {flex-grow: 1;}
      .c div:nth-of-type(4) {flex-grow: 1;}

      .d div:nth-of-type(1) {flex-grow: 1;}
      .d div:nth-of-type(2) {flex-grow: 3;}
      .d div:nth-of-type(3) {flex-grow: 1;}
      .d div:nth-of-type(4) {flex-grow: 1;}

      .e div:nth-of-type(1) {flex-grow: 1;}
      .e div:nth-of-type(2) {flex-grow: 2;}
      .e div:nth-of-type(3) {flex-grow: 3;}
      .e div:nth-of-type(4) {flex-grow: 4;}
   </style>
</head>
<body>

   <div class="a">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>

   <div class="b">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>

   <div class="c">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>

   <div class="d">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>

   <div class="e">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>

Output

Note - The >nth-of-type(N) is a pseudo-class selector, used to select every N^th child elements of specified type, of its parent.

CSS Online Test

« Previous Tutorial Next Tutorial »