首先，我們來對彈性盒中的稱呼做一些了解
如圖，彈性盒分為兩個軸，一個是主軸，一個是交叉軸，主軸方向可以改變（左右改上下），主軸方向改變后，交叉軸方向也會隨之改變
然后，我們來看下瀏覽器的大概支持情況
從圖上可以看出，ie對於彈性盒的支持可以說是呵呵了，其他的瀏覽器還可以，迫於ie的坑，在pc上感覺就可以放棄這種布局方案了，但是在移動端，從安卓2.1就開始支持（需要兼容式寫法），所以在移動端，還是可以使用的，不過該加的前綴還是不能忘記的。
下邊我們來看看彈性盒的一些寫法
開啟彈性盒
display: flex;
兼容寫法（IE10下版本不支持這屬性）
display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
定義子元素排列（主軸方向）
flex-direction: row;
row：水平方向從左到右(默認)
row-reverse：主軸從右到左
column：主軸從上到下
column-reverse：主軸從下到上
兼容式寫法
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;
定義子元素換行情況
flex-wrap：設置當前容器尺寸不足的情況下，項目是否換行顯示。默認不可以換行顯示。
nowrap：項目不換行顯示（默認）
wrap：項目換行顯示，但是在第一行項目的下邊。
wrap-reverse：項目換行顯示，但是在第一行項目的上邊
兼容式寫法
-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;
這個是上面兩個屬性的合寫
flex-flow: row nowrap;
兼容式寫法
-webkit-flex-flow:row wrap;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
-moz-flex-flow:row wrap;
box-orient:horizontal;
box-lines:multiple;
flex-flow:row wrap;
橫向排列布局
flex-start：主軸起始位置對齊
flex-end：主軸結束位置對齊
center：主軸居中對齊
space-between：主軸方向兩端對齊，項目之間存在相等的間隔
space-around：主軸方向上的項目左右兩端都有間隔，因此兩端的項目間隔比中間的項目間隔小一半
justify-content:space-around;
兼容式寫法（IE11下版本不支持這屬性，其他瀏覽器要加前綴）
-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit--moz-box-pack:center;
box-pack:center;
豎向排列布局
flex-start：設置標簽交叉軸的起始點對齊
flex-end：設置標簽交叉軸的結束點對齊
center：設置標簽交叉軸居中對齊
baseline：設置項目中第一行文本的基線對齊
stretch：設置項目的高度占滿整個容器的高度（前提：項目的高度未指定）
align-items: baseline;
兼容式寫法
align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;
伸縮盒子布局
flex:num;
兼容式寫法
box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;
元素出現順序
order:num;
兼容寫法
box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
order:num;
-webkit-order:num;
好了，大致一些經常使用的屬性就這些，其實還有一些屬性，就不在這說了（反正我沒用過~~）