display：box 属性

一、作用

在元素上设置该属性，可使其子代排列在同一水平上，类似 display:inlineblock;。
目前 box-flex 属性还没有得到 firefox、 Opera、 chrome 浏览器的完全支
持 ， 但 可 以 使 用 它 们 的 私 有 属 性 定 义 firefox(-moz-) 、 opera(-o-) 、
chrome/safari（-webkit-)。

二、可在其子代设置如下属性

前提：使用如下属性，必须在父代设置 display:box;

0x1 box-flex

可能的值为 n（数字）。
- 占父级元素宽度的 n 份
- 若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按 n 占份数
- 若子元素有 margin 值，则按余下（父级宽度-子代固定总宽度-总 margin 值）宽度占 n 份

0x2 box-orient

可能的值： horizontal | vertical | inline-axis | block-axis | inherit
- horizontal 在水平行中从左向右排列子元素。
- vertical 从上向下垂直排列子元素。
- inline-axis 沿着行内轴来排列子元素（映射为 horizontal）。
- block-axis 沿着块轴来排列子元素（映射为 vertical）。
- inherit 应该从父元素继承 box-orient 属性的值。

0x3 box-direction

可能的值：normal|reverse|inherit
- normal以默认方向显示子元素。
- reverse 以反方向显示子元素。
- inherit 应该从子元素继承 box-direction 属性的值

0x4 box-align

可能的值：start|end|center|baseline|stretch
在父级设置，子代的垂直对齐方式：
- start 垂直顶部对齐
- end 垂直底部对齐
- center 垂直居中对齐
- stretch 拉伸子代的高度，与父级设置的高度一致。子代 height
无效。
baseline 如果 box-orient 是 inline-axis 或 horizontal，所有子元素均与其基线对齐。

0x5 box-pack

可能的值：start|end|center|justify;
在父级设置，子代的水平对齐方式。
- start 水平左对齐
- end 水平右对齐
- center 水平居中对齐
- justify 在每个子元素之间分割多余的空间（首个子元素前和最
后一个子元素后没有多余的空间）。

三、兼容性

目前没有浏览器支持以上的属性。
但是需要加上前缀的，以 box-flex 为例：
Firefox 支持替代的 -moz-box-flex 属性。
Safari、 Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。