-
在移動端開發的時候，聖杯布局，彈性盒，是我們經常會用得到的，W3C很久以前就有一個display:box屬性
-
flex是最新的，但是在實際的瀏覽器測試中，display: flex 不能完全替代display: -webkit-box
-
display: box 使用可以參考 http://www.html5rocks.com/en/tutorials/flexbox/quick/
-
display: flex 使用可以參考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-
Android UC瀏覽器只支持display: box語法。而iOS UC瀏覽器則支持兩種方式
-
需要注意的是如果要使用line-clamp時需要用display:box
-
display:box
-
父元素設置該屬性后，作用與display:flex類似，子元素可在一行顯示，且實現自適應。
-
box-orient:horizontal/vertical
-
父元素設置該屬性后，作用與flex-direction: column相似。使子元素排列方向發生變化。
-
horizontal 水平排列，子代總width=父級width。若父級固定寬度，則子代設置的width無效，子代會撐滿父級寬度。
-
vertical 垂直排列，子代總height=父級height。若父級固定高度，則子代設置的height無效，子代會撐滿父級高度。
-
box-direction:normal/reverse
-
在父級上設置該屬性，作用使改變子元素的排列順序，
-
normal 默認值，子代按html順序排列 1，2，3，4
-
reverse 反序，所有元素相反順序來 ，4，3，2，1
-
box-align:start/end/center/stretch
-
在父級設置，子代的垂直對齊方式。
-
start 垂直頂部對齊
-
end 垂直底部對齊
-
center 垂直居中對齊
-
stretch 拉伸子代的高度，與父級設置的高度一致。子代height無效。
注：我們一般多使用box-align:center;來實現子元素的垂直居中。
-
box-pack:start/end/center
-
在父級設置，子代的水平對齊方式。
-
start 水平左對齊
-
end 水平右對齊
-
center 水平居中對齊
注：我們一般多使用box-pack:center來實現子元素水平居中方式
-
box-flex: 1
-
作用與flex: 1;相同。若子元素設置固定寬高，則子元素按照該子元素的寬和高，若沒有設置該屬性的子元素會占滿具有display:box屬性父元素中剩余的所有的空間。
-
設置為1則為所有剩余空間，可以為負數。
-
若子元素有margin值，則按余下（父級寬度-子代固定總寬度-總margin值）寬度占number份
-
大家不難發現display:box屬性與display:flex屬性幾乎一模一樣，就下來就會有人問了，這兩個一樣的東西到底有什么區別呢？
-
- W3C 2009年第1次草案：[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
-
- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
-
- W3C 2012年第5次草案及以后的候選推薦標准：[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)
-
前者是flex 2012年的語法，也將是以后標准的語法，大部分瀏覽器已經實現了無前綴版本。
-
后者是2009年的語法，已經過時，是需要加上對應前綴的。
-
所以兼容性的代碼，大致如下
-
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
-
display: -moz-box; /* Firefox 17- */
-
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
-
display: -moz-flex; /* Firefox 18+ */
-
display: -ms-flexbox; /* IE 10 */
-
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
-
如果要說區別，display：box； 是老規范，要兼顧古董機子就加上它。
-
flexbox flex 是新規范，老機子不支持的