语法

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

---

demo

相信大神的设计，虽然flex-shrink和flex-basis还没用到过，先简单了解下，呵呵