flex-grow
CSS
property sets the flex grow factor of a flex item
main size
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset;
flex-grow
property is specified as a single
<number>
.
This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
main size
is either width or height of the item which is dependent on the
flex-direction
值。
The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors.
flex-grow
is used alongside the other flex properties
flex-shrink
and
flex-basis
, and normally defined using the
flex
shorthand to ensure all values are set.
| 初始值 |
0
|
|---|---|
| 适用于 | flex items, including in-flow pseudo-elements |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | a number |
<number>
<h4>This is a Flex-Grow</h4> <h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5> <div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>
#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Flexible Box Layout Module
The definition of 'flex-grow' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-grow
|
Chrome 完整支持 29 | Edge 完整支持 12 |
Firefox
完整支持
20
注意事项
|
IE
完整支持
11
|
Opera 完整支持 12.1 | Safari 完整支持 9 | WebView Android 完整支持 4.4 | Chrome Android 完整支持 29 |
Firefox Android
完整支持
20
注意事项
|
Opera Android 完整支持 12.1 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 2.0 |
| <0 animate 非标 | Chrome 完整支持 49 | Edge 完整支持 79 |
Firefox
完整支持
32
注意事项
|
IE 不支持 No | Opera 完整支持 36 | Safari 不支持 No | WebView Android 完整支持 49 | Chrome Android 完整支持 49 |
Firefox Android
完整支持
32
注意事项
|
Opera Android 完整支持 36 | Safari iOS 不支持 No | Samsung Internet Android 完整支持 5.0 |
完整支持
不支持
非标。预期跨浏览器支持较差。
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。
要求使用供应商前缀或不同名称。
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
order