display：-webkit-box用法

（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，其中老大老三各占一份，老二占两份，显示效果如下：

转载于:https://www.cnblogs.com/zyl824/p/6845465.html