这是我参与更文挑战的第6天，活动详情查看： 更文挑战
起因
越来越多的人已经在使用flex布局了，flex的属性都很实用，垂直居中，水平居中，分分钟搞定。今天看到有个flex属性，它的值可以是1，auto， 0， none等等，趁此机会，实践一番，然后记录下来。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写, 默认值是0 1 auto。
flex-grow是如果有剩余空间，是否扩大，0为不扩大
flex-shrink是如果剩余空间不够，是否缩小，1为缩小
flex-basis为项目本身的大小，默认值是auto
下面来分别讲讲 flex:1 flex:auto, flex:0, flex:none的区别
flex: 1
flex: 1, 对应的是1 1 0%, 相当于可扩大，可缩小，flex-basis为0%
flex: auto
flex: auto, 对应的是1 1 auto, 相当于可扩大，可缩小，flex-basis为auto
下面看看flex: 1和flex: auto有何异同：
flex: 1
<div class="container">
<div class="item">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="item">测试测试测试测试测试</div>
<div class="item">测试测试测试测试测试</div>
</div>
<style>
.container {
display: flex;
height: 100px;
}
.item {
flex: 1;
border: 1px solid red;
}
</style>
flex: auto
<div class="container">
<div class="item">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
<div class="item">测试测试测试测试测试</div>
<div class="item">测试测试测试测试测试</div>
</div>
<style>
.container {
display: flex;
height: 100px;
}
.item {
flex: auto;
border: 1px solid red;
}
</style>
解释：
flex: 1 不管内容多少，一般都是平分空间，空间大小都一致
而flex: auto是根据内容的大小来分，不是均分的（除非内容都是一样，才均分）
flex: 0
flex: 0, 对应的是0 1 0%, 相当于不可扩大，可缩小，flex-basis为0%
flex: none
flex: none, 对应的是0 0 auto, 相当于不可扩大，不可缩小，flex-basis为auto
下面看看flex: 0和flex: none有何异同：
flex: 0
<div class="container">
<div class="item">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试1</div>
<div class="item">测试测试测试测试测试</div>
<div class="item">测试测试测试测试测试</div>
</div>
<style>
.container {
display: flex;
height: 100px;
}
.item {
flex: 0;
border: 1px solid red;
}
</style>
flex: none
<div class="container">
<div class="item">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试1</div>
<div class="item">测试测试测试测试测试</div>
<div class="item">测试测试测试测试测试</div>
</div>
<style>
.container {
display: flex;
height: 100px;
}
.item {
flex: none;
border: 1px solid red;
}
解释：
flex: 0 不可扩大，可缩小,表现形式为最小内容宽度, 上图你可以看到div的宽度就是一个字的宽度
而flex: none 不可扩大，不可缩小，内容本身的宽度是多少就是多少
总结
上面就是我总结的flex四个属性值1, auto, 0, none的异同之处，大家可以看看自己的场景再决定用哪一个值。大家可以把代码动手试试，敲一敲，更好的加深自己的记忆。
