在学习圣杯布局的时候，对于flex : 1这个属性有点不解，所以在这里记录我对这个属性的学习。
flex 属性
flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 下面我归纳了这三个属性的使用规则。
1.flex-grow
flex-grow 定义项目的放大比例，不支持负值，默认为0。
flex-grow分配剩余空间的规则如下：
（1）.如果这个容器内的子容器只有一个
则子容器这样分配剩余空间： 当0 < flex-grow的取值 <= 1 ，则会将剩余空间按照这个比例分配剩余空间:
flex-grow: 0.5;
//这里我没有设置初始长度，所以剩余空间是整个父容器的宽度
那么结果就是分配一半剩余空间：
如果flex-grow的取值 > 1，则分配所有剩余空间:
flex-grow: 1.2;
//这里我没有设置初始长度，所以剩余空间是整个父容器的宽度
那么结果就是分配所有剩余空间：
（2）如果这个容器内的子容器不止一个
则子容器这样分配剩余空间：当0 < flex-grow的取值总和 <= 1，则按比例分配剩余空间：
//父容器width：300px
//红色子容器flex-grow:0.1; 结果为30px
//绿色子容器flex-grow:0.3; 结果为90px
flex-grow的取值总和 > 1，则依照flex-grow的比例分配剩余所有空间:
//父容器width：300px
//红色子容器flex-grow:0.8;
//绿色子容器flex-grow:0.4;
//0.8+0.4 = 1.2 > 1 则红：绿 = 2 ： 1分配所以剩余空间
//红为200px，绿为100px
2.flex-shrink
flex-shrink定义项目的缩小比例，默认为1，负值对该属性无效。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-shrink的收缩规则和flex-grow相似。
3.flex-basis
flex-basis指定了Flex元素在主轴方向的初始大小
如果不使用 box-sizing 改变盒模型的话，flex-basis决定了Flex元素的内容盒子（content-box）的大小
所以总结来说：
(1).当flex布局横向的时候，即flex-direction取值为row时，flex-basis相当于width。
(2).当flex布局纵向的时候，即flex-direction取值为column时，flex-basis相当于height。
flex-basis的取值：
(1).数值：不允许负数。
(2).百分数：相对于其父弹性盒容器主轴尺寸的百分数。
(3).auto：默认值，盒子的大小等于设置的长度，如果没有设置长度，则会以盒子内容来计算。
flex的常见取值：
1.flex : none
相同于flex : 0 0 auto
flex-grow：0表示不用剩余空间来扩展自己的宽度
flex-shrink：0表示不会缩放
flex-basis：auto：默认值，盒子的大小等于设置的长度，如果没有设置长度，则会以盒子内容来计算
所以flex : none根据盒子设置的大小决定盒子的大小（如果盒子没有设置长度，则根据盒子内容计算），且这个盒子不可伸缩。
2.flex : auto
相同于flex : 1 1 auto
flex-grow：1表示会分配剩余空间来扩展自己的宽度
flex-shrink：1表示当空间不足时，都将等比例缩小
flex-basis：auto：默认值，盒子的大小等于设置的长度，如果没有设置长度，则会以盒子内容来计算
所以flex : auto根据盒子设置的大小决定盒子的大小（如果盒子没有设置长度，则根据盒子内容计算），且这个盒子可以伸缩。
3.flex : 1
相同于flex ：1 1 0%
flex-grow：1表示会分配剩余空间来扩展自己的宽度
flex-shrink：1表示当空间不足时，都将等比例缩小
flex-basis：0%：盒子的大小设置为0
所以flex : 1，这个盒子可以伸缩， 会占用伸缩容器的剩余空间。
盒子可以弹性伸缩，所以这里举两个例子：
例1：圣杯布局
<div id="header">HEADER</div>
<div id="container">
<div id="left" class="column">LEFT</div>
<div id="center" class="column">CENTER</div>
<div id="right" class="column">RIGHT</div>
</div>
<div id="footer">FOOTER</div>
/*--------center部分--------*/
#center{
flex: 1;
background: rgb(175, 209, 167);
}
例2：竖向中间内容自适应
<div id="header">HEADER</div>
<div id="center">CENTER</div>
<div id="footer">FOOTER</div>
/*----------center----------*/
#center{
flex: 1;
background: #DFD8D8;
text-align: center;
color: #dfd8d8;
}
若文章内容有错误或不妥的地方，还请您在评论区指正，蟹蟹(❤´艸｀❤)
