如果还没有使用过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
了解了吗，明白了吗，不管你懂没懂，反正我懂了👻。安排！
