Flex grow property (flex-grow)

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

Syntax:

selector {

flex-grow: number | initial | inherit;

}

Values:

number - Determines the growth size of the item in relation to other flexible items of same container. The value is expressed as a rate and the default value is 0.
initial or inherit

Example

Example of flex-grow property:

<!DOCTYPE html>
<html>
<head><style type="text/css">
div {
    width:90%; height:90px; margin:15px 2px;
    color: #ffcc11; font-weight:bold;
    display: flex;
     display: -webkit-flex; /* Safari */
}
.flex {
    margin-top:10px; padding:2px;
    width:50px; height:90px;
    background-color:#11ccff;  
}
div.flex:nth-of-type(2) {
   background-color:#ffcc11; color:#11ccff;
   flex-grow: 4;
    -webkit-flex-grow: 4;
}
p {
    margin-top:30px;
}
</style></head>

<body>

<div>
    <div class="flex">F1</div>
    <div class="flex">F2 (*4)</div>
    <div class="flex">F3</div>
    <div class="flex">F4</div>
</div>

<p>To ensure browser support, the proprietary selectors are used in styling</p>

</body>
</html>

›› go to examples ››

Flex grow property (flex-grow)

Syntax:

Values:

Example

Example of flex-grow property:

Comments

About

Contact

Get Connected