这也是弹性布局的一种，原理相同，只是针对不同的浏览器支持

语法

display: -webkit-box;//safari、chrome、Opera
display: -moz-box; //ff
display: box;// W3C标准

属性

---

box-orient

定义主轴方向

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

• horizantal 水平
• vertical 垂直
• inline-axis 沿着行内轴来排列子元素（映射为 horizontal）。
• block-axis 沿着块轴来排列子元素（映射为 vertical）。
• inherit 继承父元素的此属性

兼容写法

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;

box-pack

定义了子元素在主轴上的排列方式

box-pack: start | end | center | justify

• start 起点对齐
• end 终点对齐
• center 居中对齐
• justify 两端对齐

兼容写法：

-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;

box-align

定义子元素在交叉轴上的排列方式

box-align: start | end | center | baseline | stretch;

• start 起点
• end 终点
• center 居中
• baseline 基线对齐
• stretch 拉伸子元素填满父元素

-webkit-box-align: end;
-moz-box-align: end;
box-align: end;

box-direction

定义子元素的排列方式，默认为从左至右，从上至下

box-direction: normal | reverse | inherit;

• normal 默认方向
• reverse 反转方向

• Inherit 继承

  兼容写法

-webkit-box-direction: normal;
-moz-box-direction: normal;
box-direction: normal;

box-ordinal-group

定义子元素的显示顺序

box-ordinal-group: integer;

值越低显示在越前，当分组值相同时，按照书写顺序

兼容写法

-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;

box-flex

定义子元素相对于其他子元素的伸缩比例

box-flex: value;

兼容写法

-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;

box-flex-group

用于向柔性分组分配可伸缩元素，
暂不支持

box-lines

定义了列如果超出了父框中的空间，是否要换行显示
暂不支持

box-lines: single|multiple;