（1）介紹的第一個就是display：-webkit-box，我們知道元素大致分為內聯元素、塊狀元素和介於兩者之間的元素，當然還有inline-table、table-cell等神馬的，那么display: -webkit-box怎么用呢，什么舉個應用場景，對於下圖所示的情況，父元素被1、2、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，其中老大老三各占一份，老二占兩份，顯示效果如下：
