語(yǔ)法

flex: flex-grow flex-shrink flex-basis
主要有三個(gè)值flex-grow,flex-shrink,flex-basis，感覺(jué)常用的就flex-grow，當(dāng)然只有父元素設(shè)置diplay:flex時(shí)他們才起作用

flex-grow

1.當(dāng)不設(shè)置flex-shrink,flex-basis的值或者flex-basis的總和小于父元素寬度的得時(shí)候會(huì)根據(jù)他計(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;
}

計(jì)算公式：b的width=2/(1+2+1+1)*300

flex-shrink和flex-basis

倆配合計(jì)算，平時(shí)只用width就行干嘛用flex-basis
當(dāng)flex-basis的總和大于父元素寬度時(shí)就不用flex-grow計(jì)算了

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;
} 

因?yàn)閒lex-basis值為100,4個(gè)為400，比box設(shè)置300多出100，
100為溢出值
加權(quán)值：3x100+2x100=500
2x100/(3x100+2x100)=0.4
100x0.4=40
g的寬度:100-40=60

demo

相信大神的設(shè)計(jì)，雖然flex-shrink和flex-basis還沒(méi)用到過(guò)，先簡(jiǎn)單了解下，呵呵