前言
flex是css3开始为布局而生的，在这之前我们可以用div+css或者table进行布局，但是table布局可能及其不友好，因为它不是流式的，只要改变了table中任意一个单元格中的布局，整个table都将重新被渲染
在学习flex之前，先得明确几个概念
1.什么是容器？什么项目？什么是主轴？什么是侧轴？
在使用display：flex；时，必须是父子级关系的盒子；所以父级元素就是容器，子级元素就是项目；
主轴：默认情况下主轴是水平方向从左往右的；
侧轴：默认情况下侧轴是垂直方向从上往下；
2.项目永远都排列在主轴的正方向上；
3.flex的版本：
老版本：-webkit-box
新版本：-webkit-flex flex
4.新版本比老版本强大很多，那么我们还需要学习老版本吗？
需要，移动端开发者必须关注老版本的flex，因为移动端设备内核低只兼容老版本的flex；
新老版本flex中的属性
1.容器中的属性
老版本
1.确定容器的布局方向的属性，即确定主轴和侧轴分别是哪一条(非主/侧轴的方向)；
-webkit-box-orient：
horizontal(默认值)：主轴是x轴，水平的
vertical： 主轴是y轴，垂直的
2.确定容器的排列方向，即设置主轴的方向；
-webkit-box-direction:
normal:主轴是x轴,方向是从左往右；主轴是y轴,方向是从上往下；
reverse: 主轴是x轴,方向是从右往左；主轴是y轴,方向是从下往上；
3.富裕空间的管理，即管理富裕空间所在的位置;
主轴的富裕空间：
-webkit-box-pack：
主轴是x轴：
start:富裕空间在 右边
end: 富裕空间在 左边
center: 富裕空间在 两边
justify: 富裕空间在项目之间
主轴是y轴：
start:富裕空间在 下面
end: 富裕空间在上面
center: 富裕空间在两边
justify: 富裕空间在中间
侧轴的富裕空间：
-webkit-box-align：
侧轴是x轴：
start:富裕空间在 下面
end: 富裕空间在 上边
center: 富裕空间在主轴的两边
侧轴是y轴：
start:富裕空间在 下面
end: 富裕空间在下面
center: 富裕空间在主轴的两边
新版本
1.确定容器的布局方向的属性，即确定主轴是那一条；
flex-direction:
row : 主轴是x轴，水平的
column : 主轴是y轴，垂直的
2.确定容器的排列方向，即设置主轴的方向；
flex-direction：
row-reverse：主轴是x轴，方向从右往左；
column-reverse：主轴是y轴，方向从下往上；
3.富裕空间的管理，即管理富裕空间所在的位置
主轴 x/y轴- justify-content
flex-start：富裕空间在主轴的正方向
flex-end： 富裕空间在主轴的反方向
center：富裕空间在两边
space-between： 富裕空间在项目之间
space-around：富裕空间在项目两边
侧轴 - align-items
flex-start：在侧轴正方向
flex-end： 在侧轴的反方向
center： 在两边
baseline： 基线对齐
stretch：登高布局 盒子不设置宽高
2.项目中的属性
老版本
弹性空间管理：将主轴上的富裕空间按照比例分配到项目上；
-webkit-box-flex
新版本
弹性空间管理：将主轴上的富裕空间按照比例分配到项目上；
flex-grow :默认值为
新版本flex布局
项目中的属性
1、flex-wrap： 属性控制了容器为单行/列还是多行/列。并且定义了侧轴的方向，新行/列将沿侧轴方向堆砌。
nowrap:默认值；容器为单行/单列；
wrap：超出单行/列时换行/列；
wrap-reverse： 调换侧轴的方向；
2、align-content：属性定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。当弹性容器只有一行/列时无作用
stretch:默认值
flex-start： 所有行/列从侧轴起点开始填充。第一行/列的侧轴起点边和容器的侧轴起点边对齐。接下来的每一行/列紧跟前一行/列。
flex-end：所有弹性元素从侧轴末尾开始填充。最后一个弹性元素的侧轴终点和容器的侧轴终点对齐。同时所有后续元素与前一个对齐。
center：所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐。 容器的侧轴起点边和第一行/列的距离相等于容器的侧轴终点边和最后一行/列的距离。
space-between：所有行/列在容器中平均分布。相邻两行/列间距相等。容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的边对齐。
space-around：所有行/列在容器中平均分布，相邻两行/列间距相等。容器的侧轴起点边和终点边分别与第一行/列和最后一行/列的距离是相邻两行/列间距的一半。
3、flex-flow：是flex-direction和flex-wrap的简写属性；
row nowrap是默认值
项目中的属性
1、order ： 属性规定了弹性容器中的可伸缩项目在布局时的顺序。值越大排在越后面；
默认值： 0
2、align-self：会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
auto：默认值
flex-start：flex 元素会对齐到 cross-axis 的首端。
flex-end：flex 元素会对齐到 cross-axis 的尾端。
center：flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出。
baseline： 所有的 flex 元素会沿着基线对齐
stretch：flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸
3、flex-grow： 属性定义弹性盒子项（flex item）的拉伸因子。将主轴上的富裕空间按照比例分配到项目上；
默认值：0
4、flex-basis：指定了 flex 元素在主轴方向上的初始大小；如果未设置该属性，默认取该元素的宽/高；
默认值：auto
5、flex-shrink：属性指定了 flex 元素的收缩因子 默认值为1;
1.计算收缩因子与基准值乘的总和
2.计算收缩因数
收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
3.移除空间的计算
移除空间= 项目收缩因数 x 负溢出的空间
flex-wrap
flex-direction改变主轴方向
