一、外观排列
display: -webkit-box 可以让元素按照横向或者纵向接排列。通过设置不同的属性,还可以控制元素间的间距、对齐方式等。
.box { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; -webkit-box-flex: 1; }
-webkit-box-orient属性指定子元素排列方向,可以取值horizontal或vertical;-webkit-box-pack属性指定子元素在水平方向的排列方式,可以取值start、end、center、justify、distribute等;-webkit-box-align属性指定子元素在垂直方向的排列方式,可以取值start、end、center、baseline、stretch等;-webkit-box-flex属性指定子元素的拉伸系数,决定元素占据剩余空间的比例。
二、文本溢出
在一些容器宽度固定的场景中,长字符串的文本内容可能会出现溢出的问题。display: -webkit-box 提供了一个属性可以解决这个问题,即 -webkit-box-orient: vertical; 结合 -webkit-box-lines: n;(n为数字),即可实现文本省略号显示。
.box { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-lines: 2; }
以上代码指定元素内最多显示两行内容,超出部分将被省略,并显示省略号。(需要注意的是,只有在webkit内核的浏览器中支持该属性)
三、元素排序
display: -webkit-box 提供了一个属性-webkit-box-ordinal-group可以调整元素在父容器中的排列顺序,其值越小排列越靠前。
.box2 { display: -webkit-box; } .box2 div:nth-child(2) { -webkit-box-ordinal-group: 1; } .box2 div:nth-child(3) { -webkit-box-ordinal-group: 2; } .box2 div:nth-child(1) { -webkit-box-ordinal-group: 3; }
以上代码可以将容器中的三个子元素的排列顺序进行排列。
四、重量计算
-webkit-box-flex可以设置子元素占据剩余空间的比例,这里介绍一个特殊的用法:通过为不同的子元素设置-webkit-box-flex不同的值,可以实现盒子内部元素宽度的自适应。当然,这只是一个粗略计算,它并不支持布spring。如果要实现更完美的自适应效果,建议使用CSS 3的弹性盒子布局(Flex)。
.box3 { display: -webkit-box; } .box3 div:nth-child(1) { -webkit-box-flex: 1; } .box3 div:nth-child(2) { -webkit-box-flex: 2; } .box3 div:nth-child(3) { -webkit-box-flex: 4; }
以上代码中,第一个子元素占据1/7空间,第二个子元素占据2/7空间,第三个子元素占据4/7空间。
五、等高排列
display: -webkit-box 结合 -webkit-box-pack:justify; 可以实现容器中的元素等高排列。
.box { display:-webkit-box; /* 将此 div 设置为 `flex` 容器 */ -webkit-box-pack:justify; /* 将容器内的元素均分多余空间,撑满容器 */ text-align:justify; /* 让子元素左右两端对齐 */ }
以上代码可以使容器中的元素等高排列,并且自动适应容器的高度。