flex是三个属性flex-grow、flex-shrink、flex-basis的简写形式：
其中flex-grow代表增长系数
其中flex-shrink代表收缩系数
其中flex-basis代表主轴方向上的初始大小(也就是伸缩之前的基础大小)。
1. flex:1 意味着什么？
通过chrome浏览器控制台可知
flex: 1 === flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
flex-basis: 0%;意味着不管这些项目盒子本身的大小如何，都会平分剩余空间
2. flex:auto 意味着什么？
通过chrome浏览器控制台可知
flex: 1 === flex-grow: 1; flex-shrink: 1; flex-basis:auto;
flex-basis:auto;意味着会在这些项目盒子本身大小的基础之上平分剩余空间
3. flex:1与flex:auto的对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.father {
display: flex;
height: 30px;
}
.father .item {
flex: 1;
background-color: pink;
}
.father .item:nth-child(2n) {
background-color: red;
width: 200px;
flex-basis: auto;
}
</style>
<body>
<div class="father">
<a class="item"></a>
<a class="item"></a>
<a class="item"></a>
<a class="item"></a>
</div>
</body>
</html>偶数item会比其它项目多200px宽，因为它的flex-basis是auto，会在200px的基础上分配父元素空间，而其它项目的flex-basis则是0%，没有宽度基础。如下图所示
.father .item:nth-child(2n) {
background-color: red;
width: 200px;
flex-basis: auto;
}
