flex知识点归纳

1.flex-shrink

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>
#content {
  display: flex;
  width: 500px;
}
#content div {
  flex-basis: 120px;
}
.box { 
  flex-shrink: 1;
}
.box1 { 
  flex-shrink: 2; 
}

分析： 最外层容器500；每个子容器120；则子容器总长600；box收缩比例为1，box1的收缩比例为2；则所有子元素的总收缩比为7；

          则，box的收缩长度为原厂的1/7；剩余长度为原来的6/7；即120*（6/7）；box1为（120*（5/7））

参考：https://codepen.io/pen/?editors=1100