flex-shrink 计算规则

1.简写形式 flex:1;

 flex: 1;
        /* flex实际上是flex-grow、flex-shrink和flex-basis三个属性的缩写。 
          flex:1 ==> flex:1 1 auto
          flex的默认值为flex:0 1 auto。
          flex:1相当于设置了flex:1 1 auto。
          flex-grow属性为1，
          该元素将会占据容器中所有的剩余空间，
          
          flex-grow属性指定了flex容器中剩余空间的多少应该被分配给项目，
          flex-grow设置的值为扩张因子，默认为0，
          假如只有一个元素设置了flex-grow属性，
          那么该元素会得到所有剩余空间。


          flex-shrink属性指定了flex元素的收缩规则。
          flex元素仅在默认宽度之和大于容器的时候才会发生收缩。
          默认属性值为1，所以在空间不够的时候，
          子项目将会自动缩小。
          flex-shrink的计算公式为：
          超出宽度 * （当前元素宽度 * 其flex-shrink属性值/（每个元素的flex-shrink值 * 其宽度））。
          假如都设置flex-shrink为0，那么元素将不会缩小，宽度会超出父元素的宽度。
          */
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        /* flex-basis 设置成 300 px，最终显示为 300px ，width 的值就被 flex-basis 覆盖掉， */