display：-webkit-box用法

（1）介紹的第一個就是display：-webkit-box，咱們知道元素大體分爲內聯元素、塊狀元素和介於二者之間的元素，固然還有inline-table、table-cell等神馬的，那麼display: -webkit-box怎麼用呢，什麼舉個應用場景，對於下圖所示的狀況，父元素被一、二、3均分，且2和1之間間隔10px，你會怎麼作？

這時候咱們能夠試試新的display:-webkit-box，另外還有以下屬性配合使用，

-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默認值是inline-axis，即橫向排列

-webkit-box-flex 子元素之間比例，僅做一個係數

-webkit-box-direction 子元素排列順序 normal | reverse | inherit，其中默認值是normal

-webkit-box-flex-group 以組爲單位的流體系數

-webkit-box-ordinal-group 以組爲單位的子元素排列方向

-webkit-box-lines 子元素是否換行，相似word-wrap和word-break的做用

-webkit-box-align 子元素垂直方向的對其方式

-webkit-box-pack 子元素水平方向的對其方式

這些配合使用的屬性咱們所有默認便可

CSS：

HTML：

怎麼理解上面的代碼呢，父親有一塊地，要分給兄弟幾個，除去老大和老二之間的分割線所佔的那塊，剩下的部分均分的分數由li的兄弟個數和box-flex的總數肯定，如今一共三兄弟，每兄弟的box-flex都是1，因此就總分數=1*1+1*1+1*1=3。

若是代碼稍做修改

那麼如今老二的box-flex是2了，總分數就是1*1+1*2+1*1=4，其中老大老三各佔一份，老二佔兩份，顯示效果以下：