冷门知识：flex布局的flex-grow和flex-shrink的实际压缩值的计算

首先，说明一下flex-grow的长度的计算，此时必须保证flex布局，并且 没有设置 flex-wrap: wrap; 等一些参数 ；（ps:flex-grow 是控制flex元素如何在主轴上如何扩展的），下面是计算公式和使用规则：（这里没有考虑box-sizing的影响）

flex-grow : 任意非负数字;
//当主轴方向上有剩余的长度时，属性才有效
//flex元素推展之后的元素不能超过 max-height/max-width 的值
//当属性值的总和sum大于1时，则扩展所有剩余空间
//此时，每个元素的实际拓展长度 = 主轴的剩余长度  * （flex-grow的属性值 / flex-grow的属性值的总和）

//当属性值 的总和sum小于1时，则 总的拓展长度  = 主轴的剩余长度 *  flex-grow的属性值的和
//此时，每个元素的实际拓展长度 = 主轴的剩余长度 *  flex-grow的属性值

演示如下：

可以看到此时flex-grow 的总和为3，所以平分所有剩余的长度，剩余长度 为 400-100*3=100px
所以此时就可以算的实际长度 = 剩余主轴长度 * （flex-grow的属性值 / flex-grow的属性值的总和） = 100 * 1/3 =33.3；如上图。当小于一时也是同理。

flex-grow还是很好理解的，接下来是flex-shrink的计算（也是主轴方向）
（这里没有考虑box-sizing的影响）

flex-shrink ：任意非负数字;
//当主轴方向上有被超出的长度时，属性才有效
//flex元素收缩之后的元素不能超过 min-height/min-width 的值
//当属性值的总和sum大于1时，则 总的实际收缩值 = 超出主轴的全部长度
//当属性值的总和sum小于1时，则 总的实际收缩值 = 超出长度 * 属性的值的总和的乘积

//每个元素的实际收缩值 = 总的实际收缩值 * （当前元素的理论收缩值 / 所有当前行的flex元素的理论收缩值的总和）
//当前元素的理论收缩值 = 原始width * flex-shrink的值

演示如下：

css样式
        .box {
            height: 400px;
            width: 400px;
            background-color: orange;
            display: flex;
        }
        .item1 {
            background-color: red;
            height: 100px;
            width: 100px;
            flex-shrink: 0.3;
        }
        .item2 {
           background-color: blue;
            height: 100px;
            width: 200px;
            flex-shrink: 0.2;
        }
        .item3 {
            background-color: green;
            height: 100px;
            width: 300px;
            flex-shrink: 0.1;
        }

div元素
    <div class="box">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>

 1. 先求出实际收缩值总和，因为此时 flex-shrink的值的总和小于1所以实际总和如下：
    总的实际收缩值 = 超出长度 * 属性的值的总和的乘积 = （100+200+300-400）*（0.3+0.2+0.1） =120 px
 2.求出每个元素的理论收缩值 = 原始width * flex-shrink的值
   item1 = 100 * 0.3 = 30px;
   item2 = 200 * 0.2 = 40px;
   item3 = 300 * 0.1 = 30px;
   总的理论收缩值 = 30+40+30 =100px;
3.每个元素的实际收缩值 = 总的实际收缩值 * （当前元素的理论收缩值 / flex元素的理论收缩值的总和），
div1 = 120 * (30/100) = 36px;
div2 = 120 * (40/100) = 48px;
div3 = 120 * (30/100) = 36px;
4.这样再用原始长度减去收缩值就能得到真实的长度了 。（如上图）

如有疑问，欢迎相互交流。同时也欢迎各位大佬指正，前端菜鸡瑟瑟发抖。