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;
这就是简单的弹性盒子布局的使用，以及兼容性的解决方法。
