弹性盒模型

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
版权声明：本文为博主原创文章，转载请附上博文链接！