-
在移動端開發的時候，聖杯布局，彈性盒，是我們經常會用得到的，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:-webkit-box;父元素設置該屬性后，作用與display:flex類似，子元素可在一行顯示，且實現自適應。
演示:
1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 .parent{ 7 width: 400px; 8 height: 600px; 9 display: -webkit-box; 10 -webkit-box-orient: vertical;/* 豎向排列 */ 11 } 12 .child-one{ 13 background: lightblue; 14 -webkit-box-flex: 1; 15 } 16 .child-two{ 17 background: lightgray; 18 -webkit-box-flex: 2; 19 } 20 .child-three{ 21 background: lightgreen; 22 /* 加了固定的高度和邊距 */ 23 height: 200px; 24 margin: 15px 0; 25 } 26 </style> 27 28 <div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000"> 29 <div class="parent"> 30 <div class="child-one">1</div> 31 <div class="child-two">2</div> 32 <div class="child-three">3</div> 33 </div> 34 </div>
效果如下:
那么到這里有人會說，display:-webkit-box;與display:flex究竟有什么區別呢？
如果要說區別，display：box； 是老規范，要兼顧古董機子就加上它。
flexbox flex 是新規范，老機子不支持的
1.下面來屬性對照倆者之間屬性：
| display:box; | display:flex | 說明 |
| box-orient: horizontal | vertical | inherit | flex-direction:row | column | 該屬性定義父元素的子元素是如何排列的。 |
| box-direction:normal | reverse | flex-direction:row-reverse | row-reverse | 作用使改變子元素的排列順序 |
| box-pack: start | end | center | justify | justify-content:flex-start | flex-end | center | space-between|space-around | 該屬性定義父元素的子元素是水平排列的 |
| box-align: start | end | center | baseline | stretch | align-items:flex-start | flex-end | center | baseline | stretch | 該屬性定義父元素的子元素是垂直排列的 |
| box-flex:<number> | flex:是flex-grow, flex-shrink 和 flex-basis的簡寫 | 該屬性讓子容器針對父容器的寬度按一定規則進行划分 |
| box-ordinal-group:使用需加前綴 | order: <number> | 子項目的排列順序，數值越小排列越靠前 |
| box-lines:已被淘汰 | flex-wrap：nowrap | wrap | wrap-reverse | 子項目在容器內的換行結果 |
此處有很多flex的屬性尚未寫到，可參考我的另一篇博文詳解介紹了語法屬性詳解
tip:box屬性基本上需加上不同的瀏覽器前綴方可正式使用
2.display:flex和display:box布局瀏覽器兼容性分析
可參考資料：https://www.cnblogs.com/walk-on-the-way/p/5997073.html
總的來說，不考慮IE瀏覽器的話，PC端上使用哪個都可以，一般使用display:flex；移動端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex兩個都支持。
在實際的測試中display:flex不能完全的替代display:box。display:flex的瀏覽器兼容性比較麻煩。
兼容性瀏覽器寫法：
1 .container{ 2 display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ 3 display: -moz-box; /* Firefox 17- */ 4 display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ 5 display: -moz-flex; /* Firefox 18+ */ 6 display: -ms-flexbox; /* IE 10 */ 7 display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 8 }