背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style type="text/css">
.box{
width: 400px;height: 400px;background: bisque;
margin: 50px auto;overflow: hidden;
/*转成弹性盒子*/
display: -webkit-flex;
display: flex;
/*换行,默认交叉轴正向换行*/
flex-wrap: wrap;
/*两端对齐，项目之间的间隔都相等*/
justify-content: space-between;
/*两端对齐，项目之间的间隔都相等*/
align-content: space-between;
}
.zxw{
width: 120px;line-height: 50px;
text-align: center;color: #fff;
height: 50px;
background: red;
}
</style>
</head>
<body>
<!--设置弹性元素的扩展比率来分配剩余空间:-->
<!--flex-grow: 0;未设置默认为0-->
<ul class="box">
<li id="n1" class="zxw">zxw1</li>
<li id="n2" class="zxw">zxw2</li>
<li id="n3" class="zxw">zxw3</li>
</body>
</html>
弹性元素的扩展比率：是让如上演示的弹性元素来分配剩余的空间，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style type="text/css">
.box{
width: 400px;height: 400px;background: bisque;
margin: 50px auto;overflow: hidden;
/*转成弹性盒子*/
display: -webkit-flex;
display: flex;
/*换行,默认交叉轴正向换行*/
flex-wrap: wrap;
/*两端对齐，项目之间的间隔都相等*/
justify-content: space-between;
/*两端对齐，项目之间的间隔都相等*/
align-content: space-between;
}
.zxw{
width: 120px;line-height: 50px;
text-align: center;color: #fff;
/*margin-top: 10px;*/
height: 50px;
}
#n1{
background: red;width: 50px;
}
#n2{
background: green;width: 70px;
}
#n3{
background: blue; width: 100px;
}
</style>
</head>
<body>
<!--设置弹性元素的扩展比率来分配剩余空间:-->
<!--flex-grow: 0;未设置默认为0-->
<ul class="box">
<li id="n1" class="zxw">zxw1</li>
<li id="n2" class="zxw">zxw2</li>
<li id="n3" class="zxw">zxw3</li>
</body>
</html>
这一行弹性元素占了220个像素，还剩下空间180个像素，那怎样将多余的弹性空间分配给这三个弹性元素呢，那就要设置扩展比率属性（flex-grow）
设置弹性元素的扩展比率来分配剩余空间:
不设置flex-grow属性则flex-grow: 0;（未设置默认为0,）不参与分配剩余空间
这里的1 2 3指的是将剩余的空间（这里剩余180px）分成多少份，并分别占1，2，3份
如这里将剩余的空间分成6份，#n1占1份，#n2占2份，#n3占3份
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style type="text/css">
.box{
width: 400px;height: 400px;background: bisque;
margin: 50px auto;overflow: hidden;
/*转成弹性盒子*/
display: -webkit-flex;
display: flex;
/*换行,默认交叉轴正向换行*/
flex-wrap: wrap;
/*两端对齐，项目之间的间隔都相等*/
justify-content: space-between;
/*两端对齐，项目之间的间隔都相等*/
align-content: space-between;
}
.zxw{
width: 120px;line-height: 50px;
text-align: center;color: #fff;
/*margin-top: 10px;*/
height: 50px;
}
#n1{
background: red;width: 50px;
flex-grow: 1;
}
#n2{
background: green;width: 70px;
flex-grow: 2;
}
#n3{
background: blue; width: 100px;
flex-grow: 3;
}
</style>
</head>
<body>
<!--设置弹性元素的扩展比率来分配剩余空间:-->
<!--flex-grow: 0;未设置默认为0-->
<ul class="box">
<li id="n1" class="zxw">zxw1</li>
<li id="n2" class="zxw">zxw2</li>
<li id="n3" class="zxw">zxw3</li>
</body>
</html>
