(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,其中老大老三各占一份,老二占兩份,顯示效果如下: