display: -moz-box;
display: -webkit-box;
display: box;
1)box-orient:用来确定子元素的方向。是横着排还是竖着走。
horizontal | vertical | inline-axis | block-axis | inherit
2)box-direction:用来确定子元素的排列顺序,即是否反转。
normal | reverse | inherit
3)box-pack:用来确定子元素的左右对齐方式,对剩余空间的利用。
start | end | center | justify
4)box-align:用来确定子元素的上下对齐方式。
start | end | center | baseline | stretch
5)box-flex:用来确定子元素如何分配其剩余元素。子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和。
.content:nth-child(2) {
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
}
5)box-lines:用来决定子元素是可以换行显示。
6)box-flex-group:用来确定子元素的所属组。
目前没有浏览器支持 box-flex-group 属性
7)box-ordinal-group:用来确定子元素的显示顺序。
p:nth-child(1) {
-webkit-box-ordinal-group: 1;
}
p:nth-child(2) {
-webkit-box-ordinal-group: 5;
}
p:nth-child(3) {
-webkit-box-ordinal-group: 3;
}
p:nth-child(4) {
-webkit-box-ordinal-group: 4;
}
p:nth-child(5) {
-webkit-box-ordinal-group: 2;
}
作者:Wendy-lxq
来源:CSDN
原文:https://blog.csdn.net/u010297791/article/details/54945290
版权声明:本文为博主原创文章,转载请附上博文链接!