語法
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的總和小于父元素寬度的得時候會根據(jù)他計算各子元素寬度
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
