css3的彈性盒子布局，簡直超級好用，它有很多很多的屬性，再次一一給大家例出來，以及兼容性的
問題，給大家談一談。
首先要知道彈性盒子布局是什么，很簡單，就是display:flex
display:flex 多欄多列布局瀏覽器支持情況：火狐直接支持W3C無前綴寫法，谷歌和opera支持-webit-
前綴寫法，比較適合移動端開發(fā)使用。
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    會把換行后的子元素調(diào)換一下位置   
    布局流
    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;
子元素占據(jù)剩余的空間
    -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;

這就是簡單的彈性盒子布局的使用，以及兼容性的解決方法。