1.介绍
CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。
flex-grow
CSS flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。
flex-grow
用法是这个样子的
flex-grow: 1;
flex-grow: inherit;
2.多说无益，上代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex:1</title><style>.box {height: 200px;display: flex;}#box1 {background-color: pink;flex-grow: 1;}#box2 {background-color: yellow;flex-grow: 3;}</style>
</head>
<body><div class="box"><div id="box1">box1</div><div id="box2">box2</div></div>
</body>
</html>
见下图：
