flex:1 和 flex:auto区别

如果还没有使用过flex，请先拜读下阮大大之Flex 布局教程：语法篇

在说flex:1和flex:auto区别之前先回顾flex:0 1 atuo;
从默认值上可以看出它有三个属性，分别是 flex-grow、flex-shrink、flex-basis

flex-grow:项目的放大比例，默认为0，如果存在剩余空间，不放大
flex-shrink:项目的缩小比例，默认为1，如果空间不足，会适当缩小
flex-basis:在分配空间之前，项目的主轴空间，相当于我们设置的width，

如下:
flex参数缩写后三个属性分别对应的值:

flex:none;   // flex : 0,0,auto;
flex:auto;  // flex:1,1,auto;
flex:1;    //  flex:1,1,0%;

从上面可以看到flex:auto和flex:1的区别只在于flex-basis这个属性，auto表示基准值(也就是设置的width)，0%表示0无尺寸

    
Item1
    
Item2
    
Item3

1、分配前,子元素占用空间：0 + 300 + 200 = 500
2、父级空间: 1000
3、可分配空间: 1000 - 500 = 500
4、放大系数: 2 + 2 + 1 = 5
5、子元素获取可放大空间：
       item1： 500 * 2/5 = 200
       item2： 500 * 2/5 = 200
       item3： 500 * 1/5 = 100
6、实际子元素空间:
       item1: 0 + 200 = 200
       item2: 300 + 200 = 500
       item3: 200 + 100 = 300

了解了吗，明白了吗，不管你懂没懂，反正我懂了。安排！