弹性盒子布局

css3的弹性盒子布局，简直超级好用，它有很多很多的属性，再次一一给大家例出来，以及兼容性的
问题，给大家谈一谈。
首先要知道弹性盒子布局是什么，很简单，就是display:flex
display:flex 多栏多列布局浏览器支持情况：火狐直接支持W3C无前缀写法，谷歌和opera支持-webit-
前缀写法，比较适合移动端开发使用。
display:flex这个牛逼的布局属性，遗憾的是只有谷歌和火狐支持，
中国人常用的手机上的浏览器几乎全军覆没，UC浏览器不支持，安卓4.1.1和之前版本手机自带的浏览器也不支持，微信自带的浏览器也不支持。
我们来介绍一下display:flex 给父级加，它的子级会变成弹性盒子布局，就是把浮动和定位加一起啦。
默认加上之后它就会平均分布。
接下来我们介绍一个它有什么属性

给父级加
    display:fixd   
    fiex-direction:row   从左到右排序 （默认值）
    fiex-direction:row-reverse   从右到左排序 ，并且是右对齐
    fiex-direction:column     从上到下排序  
    fiex-direction:column-reverse     从下到上排序  
    fiex-wrap:nowrap   不换行（默认），即使子元素的宽度和超过了父级的宽度，他们也不会换行，并且会自动的把宽度缩小，能够在一行中显示
    fiex-wrap:wrap     正常换行
    fiex-wrap:wrap-reverse    会把换行后的子元素调换一下位置   
    布局流
    flex-flow: row nowrap    默认值
    flex-flow: row-reverse nowrap  
    flex-flow: row-reverse wrap 
    flex-flow: row-reverse wrap-reverse   排序加换行 
    水平对齐
    justify-content:flex-start    默认 子元素居左对齐
    justify-content:flex-end       子元素居右对齐
    justify-content:center         子元素居中对齐
    justify-content:space-between      子元素分居中对齐 （两边对齐）
    justify-content:space-around       子元素分散居中对齐（不是两边对齐）
    垂直对齐
    align-items:flex-start   默认    上边对齐
    align-items:flex-end             下边对齐
    align-items:center               中心对齐
    多行布局（必须多行）
    align-content:flex-start      顶部对齐
    align-content:flex-end        底部对齐
    align-content:center          垂直对齐
    align-content:space-between   垂直两端对齐
    align-content:stretch         默认对齐

给子级加，假如子级有3个div给每个子级加一个flex：1，就好比把父级分为三份，每一个块，占一份，如果让一个div占2份，剩下的1份，就好比把父级分为四份，占2份的占2分之一，这就是一个简单的弹性盒子布局。下面我们来说一下它兼容性的处理

弹性盒子兼容性处理
定义布局为盒模型
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
盒模型垂直布局
    -webkit-box-orient:vertical;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
子元素占据剩余的空间
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
子元素垂直居中
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
子元素水平居中
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
子元素两端对齐
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;

这就是简单的弹性盒子布局的使用，以及兼容性的解决方法。