代码验证flex:1与flex-grow:1的区别与计算方式

前言：在阮大大的flex教程中说：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。大家会误以为只写flex的效果和flex-grow是完全一样的，实则它们的计算方式是完全不同的，在使用时候要注意，使用正确的放大属性，从而达到自己想要的效果。

1. flex的宽度计算方式是分配 "容器剩余空间+具有flex属性的元素自身尺寸"：
举例：在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:2的属性，给b元素flex:1的属性，不给c元素。
计算宽度的规则是：（1）容器剩余空间400px-300px = 100px （2）参具有flex属性的元素自身尺寸100px+100px = 200px （3）求和100px+200px = 300px

把这300px按2:1的比例分给a和b ，最后：a:width:200px ; b:width:100px ; c:width:100px

代码验证：

 <style>
        .container {
            display: flex;
            width: 400px;
            height: 200px;
            background-color: red;
        }
        .a {
            width: 100px;
            flex: 2;
            background-color: blue;
        }
        .b {
            width: 100px;
            flex: 1;
            background-color: green;
        }
        .c {
            width: 100px;
            background-color: yellow;
        }
    </style>

    <div class="container">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>

效果如下：

2. flex:grow的宽度计算方式是只分配"容器剩余空间",但是要加上元素自身的尺寸：
举例：还是在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex-grow:2的属性，给b元素flex-grow:1的属性，不给c元素。
计算宽度的规则是：(1）容器剩余空间400px-300px = 100px
把这剩余的100px按2:1的比例分给a和b：（2）a：2份＋自身宽度100px （3）b：1份＋自身宽度100px 
最后：a:width:166.7px ; b:width:133.3px ; c:width:100px

代码验证：

    <style>
        .container {
            display: flex;
            width: 400px;
            height: 200px;
            background-color: red;
        }
        .a {
            width: 100px;
            flex-grow: 2;
            background-color: blue;
        }
        .b {
            width: 100px;
            flex-grow: 1;
            background-color: green;
        }
        .c {
            width: 100px;
            background-color: yellow;
        }
    </style>

    <div class="container">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>

效果如下： 

补充2个剩余空间为0的例子：
1、 在一个width:300px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:3的属性，给b元素flex:2的属性，不给c元素。
计算宽度是：剩余空间0 + 参与flex项目尺寸200px ，按比例给a3份，b2份。
最后：a:width:120px ; b:width:80px ; c:width:100px

2、 在一个width:300px的容器中，有a、b、c 三个width:100px的元素，给a元素flex-grow:3的属性，给b元素flex-grow:2的属性，不给c元素。
计算宽度是：剩余空间0 项目没有可分配的空间，尺度不会发生变化。
最后：a:width:100px ; b:width:100px ; c:width:100px

附：本文参考文章https://blog.csdn.net/weixin_49684995/article/details/107880408