一、flex的宽度计算方式是容器剩余空间+
    
     具有flex属性
    
    的元素自身尺寸:
    
    例如在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:2的属性,给b元素flex:1的属性,不给c元素。
    
    计算宽度是:剩余空间(400px-300px):100px + 参与flex项目尺寸200px=300px 再按3份的比例给a2份,b1份。
    
    
     最后:a:width:200px ; b:width:100px ; c:width:100px
    
   
    二、flex:grow的宽度计算方式只是容器剩余空间:
    
    还是在一个width:400px的容器中,有a、b、c 三个width:100px的元素,给a元素flex-grow:2的属性,给b元素flex-grow:1的属性,不给c元素。
    
    计算宽度是:剩余空间(400px-300px):100px
    
    剩余100px再按3份比例给a2份+
    
     
      自身本身尺寸
     
    
    ,b1份+
    
     
      自身本身尺寸
     
    
    。
    
    
     最后:a:width:166.7px ; b:width:133.3px ; c:width:100px
    
   
    三、如果一个容器中的所有项目都给了flex或flex-grow属性,那么在计算中没有差别。两者最大的差别就在于flex的宽度是具有flex属性(即参与项目)尺寸再加上剩余空间。再除以份数剩以比例。
    
    再举2个例子:
    
    1、 在一个width:300px的容器中,有a、b、c 三个width:100px的元素,给a元素flex:3的属性,给b元素flex:2的属性,不给c元素。
    
    计算宽度是:剩余空间0 + 参与flex项目尺寸200px=200px 再按5份的比例给a3份(200除以5剩以3),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
    
   
                                                                                  are U get?
 
