display:box；display:flex；彈性盒模型
非常適用於移動端。PC端高級瀏覽器，效果也很好。
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
這是老版本的寫法，09年之前的。這樣給外面的父元素設置了這5個屬性之后，這個div就是彈性盒子模型了。
里面的元素就可以自由分配空間了，在一行，而不需要浮動布局float了
而彈性伸縮盒的原理就是給父元素聲明一個display:box伸縮盒屬性后，就代表是把整個盒子里的塊元素都變成了內聯元素，然后這個父元素里面的子元素就可以自由分配空間了，而不會每個塊元素各占一行，而是協商共同排在一行上面。可以這么理解。
比如下面例子
--------------html-----------------
<div class="box">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
--------------css------------------
.box {
width: 330px;
height: 400px;
border: 1px #000 solid;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
}
.box p {
width: 100px;
height: 20px;
background: #000;
margin: 5px;
}
-----------------end-------------------
這div里面的3個p標簽會在一行展示，而不是上下層級分配
2011年之后出現了display:flex;
1、首先，新版本設置伸縮盒的display屬性如下：
display:flex;將容器盒模型作為塊級彈性伸縮盒顯示(新版本)
display:inline-flex;將容器盒模型作為內聯級彈性伸縮盒顯示(新版本)
例如：
div{
display:flex;
}
大部分新版瀏覽器基本都不用使用前綴了，目前應該只有蘋果瀏覽器需要帶webkit前綴，其他都可以正常顯示。
box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，設為Flex布局以后，子元素的 float 、 clear 和 vertical-align 屬性將失效。
二、彈性伸縮盒的屬性
1、box-orient屬性
box-orient主要實現盒子內部元素的流動方向。我們看看他們的屬性值如下：
A、box-orient:horizontal;伸縮項目從左到右水平排列。默認值
B、box-orient:vertical;伸縮項目從上到下垂直排列。
C、box-orient:inline-axis;伸縮項目沿着內聯軸排列顯示。
D、box-orient:block-axis;伸縮項目沿着塊軸排列顯示。
一般我們就默認就行了。
2、box-direction屬性
主要是設置伸縮容器中元素的流動順序。
屬性值：
box-direction:normal;默認值，正常順序。
box-direction:reverse;逆向排列，也就是倒着排列的意思。
3、box-pack屬性
用於伸縮項目的分布方式。
它的屬性值如下：
box-pack:start;伸縮項目以起始點靠齊。
box-pack:end;伸縮項目以結束點靠齊。
box-pack:center;伸縮項目以中心點靠齊。
box-pack:justify;伸縮項目平均分布，也就是兩邊排列的意思。-webkit-支持，-moz-不支持。
不過你如果不給父元素div添加寬度為100%的話，是顯示不出效果來的，因為div添加了display：box;屬性后，這個div就不是普通盒子了，而是伸縮性盒子了，隨里面內容伸縮。所以我們必須給他強制添加一個寬度，這樣設置了box-pack排列屬性才會有效果。比如：
div{
width:100%
-webkit-box-pack:end;
}
這樣才會有效果的，也就是從結尾即從右側向左側排列的了。如果我們設置成center就變成居中了。
4、box-align屬性
用來處理伸縮容器的額外空間。
有五個屬性值：
box-align:start;伸縮項目以頂部為基准，清理下部分額外空間。
box-align:end;伸縮項目以底部為基准，清理上部分額外空間。
box-align:center;伸縮項目以中部為基准，平均清理上下部額外空間；
box-align:baseline;伸縮項目以基線為基准，清理額外的空間；
box-align:stretch;伸縮項目填充整個容器，是默認值。
例如：
div{
-webkit-box-align:center;
}
就是垂直居中對齊的意思，而清理上下額外空間就是p模塊容器里的內容正好填滿，不顯示多余的空間。
綜合網絡很多資源，得以總結理解，多謝下面鏈接作者，僅此備份，便於自己理解。
參考鏈接：
http://blog.tianya.cn/post-5475416-98043238-1.shtml
http://www.ql2015.cn/web/divcss/425.html/2
http://www.ql2015.cn/web/divcss/425.html/3
http://www.tuicool.com/articles/UneAJju
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/