display:box——弹性盒模型

一、基本信息

写法：（两个写法效果没有区别）

display:box

display:inline-box

相似属性：display: flex;

浏览器兼容性：需要加浏览器内核前缀

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

二、属性

浏览器兼容性：需要就浏览器内核前缀，下面以-webkit-为例

1、垂直、水平显示

水平写法：-webkit-box-orient:Horizontal;

垂直写法：-webkit-box-orient:vertical;

默认：水平显示

2、元素排列顺序

正序写法：-webkit-box-direction:Normal;

反序写法：-webkit-box-direction:Reverse;

默认：正序

3、设置元素的具体位置

写法：-webkit-box-ordinal-group:数字;

-webkit-box-ordinal-group:2;    2为具体的顺序，这里指的是此元素第二个显示

4、设置盒子的弹性空间

写法：-webkit-box-flex:数字;

.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
其中的数字代表把父级的可支配空间（减去有固定尺寸子元素的宽度）分成2+3+4+5=14份，第一个元素占其中的两份