Flex 弹性布局
这个是css3中新添加的内容，现在已经支持所有的浏览器，利用Flex布局，可以简便、完整、响应式地实现各种页面布局。
注意：在设置 flex 后，子元素的flaot ，clear, vertical－align 都失效。
Webkit 内核的浏览器，必须加上 －webkit前缀
flex 里面的元素我们把它们称为 项目
目前支持：
1.Chrome 21+
2.Opera 12.1+
3.Firefox 22+
4.Safari 6.1+
5.IE 10+
在弹性布局中 有两个重要的 术语叫 main axis 和 cross axis
main axis 是指项目中的 水平主轴 水平主轴开始位置叫 （main start ） 结束点叫 （main end）
cross axis 是指项目中的 垂直交叉轴 垂直交叉轴的起点叫（ cross start） 结束点叫（cross end ）
默认的排列是：沿水平主轴的左侧为起点
Flex 的6个属性
1.flex-disrection
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content
1.Flex -disrection 属性 决定主轴的方向（项目的排列方向）一共四个属性
语法：flex-direction: column || column-reverse || row || row-reverse
column－reverse ：主轴在垂直轴，起点为下。
column : 主轴为垂直轴，起点在上。
row ：主轴在水平轴，起点在左。（默认）
row－reverse ：主轴为水平轴，起点在右。
2.justify － content 属性 项目在主轴的对齐方式 一共有5个属性
语法：justify-content: center|| flex-end || flex-start || space-around || space-between ;
1.justify-content:flex-start; 左对齐 系统默认的对齐方式
2.justify-content: center; 内容居中 （如果剩余的*空间是负的，则弹性项目将在两个方向上同时溢出）
3.justify-content: flex-end; 右对齐
4.justify-content: space-around;
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是10px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*10px=5px）。
5.justify-content: space-between; ( 通俗点就是子元素之间的间隙是一样的）
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
下面的图片解释5个属性之间的区别
3.Flex-wrap 如何换行 3个属性
语法：flex－wrap：nowrap || wrap || wrap-reverse .
flex-wrap : nowrap ; 不换行 （默认）
flex-wrap :wrap ; 换行 第一行在上面
flex-wrap :wrap -reverse ; 换行，第一行在下面
4.Flex-flow 属性 是指 flex-direction 属性和 flex-wrap 属性的简写形式 默认属性 flex－flow ：row nowrap ；
5.align-items 属性 项目在垂直轴的对齐方式 一共5个属性
语法 ：align-items:flex-start || flex-end || centen || stretch || baseline ;
1. align-items:flex-stert; 垂直轴的起点对齐
2. align-items:flex-end; 垂直轴的终点对齐
3. align-items: center ; 垂直轴的中点对齐
4. align-items: stretch ; (默认值） 项目未设置高度或者高度为 auto时, 项目将沾满 整个容器的高度
5. align-items: baseline; 在项目中，以第一行文字的基线对齐
6. align-content 属性 多根轴线的对齐方式，如果只有一条轴线，则不起作用
语法：align－content：flex-start || flex-end || center || stretch || space-between || space-around ;
1. align-content: flex-stert; 与垂直轴的起点对齐
2. align-content: flex-end ; 与垂直轴的终点对齐
3. align-content : center ; 与垂直轴的中点对齐
4. align-content : stretch ; (默认值） 轴线占满整个垂直轴
5. align-content : space-between; 与垂直轴两端对齐，轴线之间的间隔平均分布
6. align-content: space-around; 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
二. Flex 中项目的属性
1. order 属性 （默认值 ：0）定义项目的排列顺序。数值越小，排列越靠前。
2. flex-grow 属性 （默认值：0）定义项目的放大比列 ，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3. flex－shrink 属性 （默认值：1）负值无效 定义项目的缩小比列 即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4.flex－basis 属性 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以设置 width 或 height 属性一样的值，项目将占固定空间。
5. flex 属性 flex-grow, flex-shrink 和 flex-basis的简写，默认值为（0 1 auto），后两个属性可选。
6. align－self 属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
语法 ： align-self: auto || flex-start || flex-end || center || baseline || stretch;
