语法
flex: flex-grow flex-shrink flex-basis
主要有三个值flex-grow,flex-shrink,flex-basis，感觉常用的就flex-grow，当然只有父元素设置diplay:flex时他们才起作用
flex-grow
1.当不设置flex-shrink,flex-basis的值或者flex-basis的总和小于父元素宽度的得时候会根据他计算各子元素宽度
html:
<div class="box">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">hello world!</div>
</div>
css:
.box {
width:300px;
display:flex;
height:40px;
line-height:40px;
text-align:center;
}
.box>div {
flex:1;
}
.box>div:nth-of-type(2) {
flex:2;
}
计算公式：b的width=2/(1+2+1+1)*300
flex-shrink和flex-basis
俩配合计算，平时只用width就行干嘛用flex-basis
当flex-basis的总和大于父元素宽度时就不用flex-grow计算了
html:
<div class="box">
<div class="f">1</div>
<div class="g">2</div>
<div class="k">3</div>
<div class="l">4</div>
</div>
css:
.box {
width:300px;
display:flex;
height:40px;
line-height:40px;
text-align:center;
}
.box:nth-of-type(2)>div {
flex:1;
flex-shrink:1;
border:1px solid #ccc;
flex-basis: 100px;
}
.box:nth-of-type(2)>div:nth-of-type(2) {
flex-shrink:2;
}
因为flex-basis值为100,4个为400，比box设置300多出100，
100为溢出值
加权值：3x100+2x100=500
2x100/(3x100+2x100)=0.4
100x0.4=40
g的宽度:100-40=60
