網頁佈局——Box盒子

• 在移動端開發的時候，聖盃佈局，彈性盒，是咱們常常會用獲得的，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/
• 兼容性的問題能夠參考 https://css-tricks.com/old-flexbox-and-new-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佈局瀏覽器兼容性分析

可參考資料：http://www.javashuo.com/article/p-gmuaghyy-bs.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 }