- Objective:
- Breadcrumb:
# 概念阐释
CSS 属性 **`flex-grow`** 设置flex item的高或宽的增长系数。对只有一个class `.item`不起作用。增长指数是相对于其他item的**倍数**。
## 语法
```
/* <number> 值 */
flex-grow: 3;
flex-grow: 0.6;
/* 全局值 */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: unset;
```
- 负值无效，默认为0
# 实例
```html
<div class="container">
<div class="item1">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
```
```css
.container {
border:1px solid black;
display:flex;
}
.item {
border:1px solid red;
/* flex-basis: 40px; */
flex-grow:1
}
.item1 {
flex-grow: 2;
}
```
# 相关内容
[[CSS Flexbox item flex-basis 定义宽高]]是手动自定义高度和宽度，`flex-grow`用倍数快速定义。
# 参考资料
[MDN flex-grow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow)