flex布局学习之flex属性

语法

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:

    
1
    
2
    
3
    
hello world!
  

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:

  

    
1
    
2
    
3
    
4
  

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还没用到过，先简单了解下，呵呵