flex属性计算

	<div class="parent">
      <div class="item-1"></div>
      <div class="item-2"></div>
      <div class="item-3"></div>
    </div>

    <style type="text/css">
      .parent {
        display: flex;
        width: 600px;
      }
      .parent > div {
        height: 100px;
      }
      .item-1 {
        width: 140px;
        flex: 3 1 0%;
        background: blue;
      }
      .item-2 {
        width: 200px;
        flex: 6 1 auto;
        background: darkblue;
      }
      .item-3 {
        flex: 1 1 200px;
        background: lightblue;
      }
   </style>

前提：在不考虑第二个值的情况下计算。即flex:xxx 1 xxx;
第二个值涉及到宽度超出溢出的情况。该值在这里讲解的很详细了。

flex: group shrink basis 即：
flex: 扩张比 缩放比 初始长度

flex子元素盒子大小 = 扩展空间+初始长度

子元素flex值：
flex: 3 1 0% width: 140px
flex: 6 1 auto width: 200px
flex: 1 1 200px width: auto

根据上面的三个flex来分析：
剩余空间
剩余是取决于flex的第三个参数即初始长度，以上分别为 0%, auto, 200px。
0% 指的width的值的百分比，那这里就是0。
auto，继承主尺寸即宽度，所以是200px
200px, 有指出则直接是该值。
剩余空间=总宽度-总基础长度：0 + 200 + 200 = 400，600 - 400 = 200
扩张比例
比例是指剩余空间的分配比例，取决于flex的第一个参数，扩张值。计算为实际的px值则是：该元素的扩张值=剩余数/比例总数*每份比例
扩张比例：3：6：1 = 60 120 20
子元素宽度 = 剩余分配值 + 初始长度
0 + 60 = 60
200 + 120 = 320
200 + 20 = 220