flex-grow
CSS flex-grow Property
The flex-grow property specifies how much the item will grow relative to the rest of items of the flex container. If all items of the container are specified by the flex-grow factor, then all items share the available space. A flexible item’s main size is either its height or width which depends on the value of flex-direction.
This property is one of the CSS3 properties. It is used with the flex-shrink and flex-basis properties.
If there are no flexible items, flex-grow property won’t have any effect.
| 类目 | 类目 |
|---|---|
| Initial Value | 0 |
| Applies to | Flex items, including in-flow pseudo-elements. |
| Inherited | No. |
| Animatable | Yes. Items are animatable. |
| Version | CSS3 |
| DOM Syntax | object.style.flexGrow = “3”; |
Syntax
Syntax
flex-grow: number | initial | inherit;
Example of the flex-grow property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: -webkit-flex; /* Safari */
display: flex;
}
/* Safari 6.1+ */
.box div:nth-of-type(1) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(2) {
-webkit-flex-grow: 2;
}
.box div:nth-of-type(3) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(4) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(5) {
-webkit-flex-grow: 1;
}
/* Standard syntax */
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 2;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>
Result
Example of the flex-grow property with an item growing by 6 px:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: -webkit-flex; /* Safari */
display: flex;
}
/* Safari 6.1+ */
.box div:nth-of-type(1) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(2) {
-webkit-flex-grow: 6;
}
.box div:nth-of-type(3) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(4) {
-webkit-flex-grow: 1;
}
.box div:nth-of-type(5) {
-webkit-flex-grow: 1;
}
/* Standard syntax */
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 6;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>
Values
Values
| Value | Description | Play it |
|---|---|---|
| number | Specifies how much the item will grow relative to the rest of flexible items of the same container. Default value is 0. | Play it » |
| initial | Sets the property to its default value. | Play it » |
| inherit | Inherits this property from its parent element. |