CSS flex-grow Property

The CSS flex-grow property defines how much the item will grow relative to the rest of the flexible items inside the same container.

Syntax:

flex-grow: number;

number – A number defining how much the item will grow relative to the rest of the flexible items. The default value is 0.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#box-container {
  width: 300px;
  height: 100px;
  border: 3px solid #333;
  display: flex;
}

#box-container div:nth-of-type(1) {flex-grow: 1;}
#box-container div:nth-of-type(2) {flex-grow: 3;}
#box-container div:nth-of-type(3) {flex-grow: 1;}
#box-container div:nth-of-type(4) {flex-grow: 1;}
#box-container div:nth-of-type(5) {flex-grow: 2;}
</style>
</head>
<body>

<div id="box-container">
  <div style="background-color:#264653;"></div>
  <div style="background-color:#2a9d8f;"></div>
  <div style="background-color:#e9c46a;"></div>
  <div style="background-color:#f4a261;"></div>
  <div style="background-color:#e76f51;"></div>
</div>

</body>
</html>

Output:

Note: Internet Explorer 10 and earlier versions do not support the flex-grow property!

Enjoy coding!

Share this: