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无尺寸

<div class="flex-box">
    <div class="item1">Item1</div>
    <div class="item2">Item2</div>
    <div class="item3">Item3</div>
</div>

<style type="text/css">
    .flex-box{
         display: flex;
         width: 1000px;
         text-algin:center;
    }

    .item1 {
        height: 100px;
        width: 200px;
        flex: 2 1 0%; /*flex-basis为0%，覆盖width，实际占用0*/
        background:red;
    }

    .item2 {
        height: 100px;
        width: 300px;
        flex: 2 1 auto;  /*flex-basis为auto，width权限更高，占用300*/
        background:green;
    }

    .item3 {
        height: 100px;
        flex: 1 1 200px; /*flex-basis为200，占用200*/
        background:blue;
    }
</style>

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

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