CSS flex-grow Property

The flex-grow property specifies how much the item will grow in comparison to the other items in the container. In other words, it is an item's ability to grow in comparison to other items in the same container.

Note: If the item in the container is not flexible, the flex-grow property will have no effect on it.

Syntax

flex-grow: number | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 250px;
        height: 100px;
        border: 1px solid #212b36;
        display: flex;
    }
    .box div:nth-of-type(1) {flex-grow: 1;}
    .box div:nth-of-type(2) {flex-grow: 3;}
    .box div:nth-of-type(3) {flex-grow: 1;}
    .box div:nth-of-type(4) {flex-grow: 1;}
</style>
</head>
<body>

<div class="box">
    <div style="background-color:#00ab55;"></div>
    <div style="background-color:#ff4842;"></div>
    <div style="background-color:#ffc107;"></div>
    <div style="background-color:#1890ff;"></div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
number	A number indicating how much the item will grow in comparison to the other flexible items. The default value is zero.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
flex-flow	29.0 21.0 -webkit-	28.0 18.0 -moz-	9.0 6.1 -webkit-	11.0	17.0

flex-flow

flex-shrink

CSS flex-grow Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us