CSS Property flex-grow
The flex-grow property is a -property of the Flexible Box Layout.
The flex-grow property sets
how much to grow the element relative to the rest of the
flexible items inside the same container.
It defines how to grow a flex item if necessary.
The flex-grow property accepts a unitless value used as a proportion.
It controls how much amount of the available space inside the flex container the item should take up.
For example, if all items' flex-grow are 1,
every child will have an equal size inside the container.
If one of the children has a value of 2, that child would take up twice as much space as the others.
Summary
- Initial value
- 0
- Inherited
- no
- CSS Version
- CCS3
- JavaScript syntax
- object.style.flexGrow="5"
- Animatable
- yes
CSS Syntax
flex-grow: number|initial|inherit;
Property Values
- number
- A unitless number to control how the item will grow relative to the rest of the flexible items. Default value is 0.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
flex-grow |
Yes | 11.0 | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
#main {<!--from www . j a va 2s . com-->
width: 450px;
height: 100px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
/* Safari 6.1+ */
#main div:nth-of-type(1) {-webkit-flex-grow: 1;}
#main div:nth-of-type(2) {-webkit-flex-grow: 3;}
#main div:nth-of-type(3) {-webkit-flex-grow: 1;}
#main div:nth-of-type(4) {-webkit-flex-grow: 2;}
#main div:nth-of-type(5) {-webkit-flex-grow: 1;}
/* Standard syntax */
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 2;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>
</head>
<body>
<div id="main">
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:tomato;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:grey;"></div>
</div>
</body>
</html>