display:box

display:box属性与display:flex属性几乎一模一样，就下来就会有人问了，这两个一样的东西到底有什么区别?

• W3C 2009年第1次草案：display:box;

• W3C 2011年第2次草案：display:flexbox | inline-flexbox;

• W3C 2012年第5次草案及以后的候选推荐标准：display:flex | inline-flex;

• 前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。

• 后者是2009年的语法，已经过时，是需要加上对应前缀的。

所以兼容性的代码，大致如下
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+ */
如果要说区别，display：box； 是老规范，要兼顾古董机子就加上它。
flexbox flex 是新规范，老机子不支持的

详细属性介绍：

display:box

父元素设置该属性后，作用与display:flex类似，子元素可在一行显示，且实现自适应。

box-orient:horizontal/vertical

父元素设置该属性后，作用与flex-direction: column相似。使子元素排列方向发生变化。
horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。
vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。

box-direction:normal/reverse

在父级上设置该属性，作用使改变子元素的排列顺序，
normal 默认值，子代按html顺序排列 1，2，3，4
reverse 反序，所有元素相反顺序来 ，4，3，2，1

box-align:start/end/center/stretch

在父级设置，子代的垂直对齐方式。
start 垂直顶部对齐
end 垂直底部对齐
center 垂直居中对齐
stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。
注：我们一般多使用box-align:center;来实现子元素的垂直居中。

box-pack:start/end/center

在父级设置，子代的水平对齐方式。
start 水平左对齐
end 水平右对齐
center 水平居中对齐
注：我们一般多使用box-pack:center来实现子元素水平居中方式

box-flex: 1

作用与flex: 1;相同。若子元素设置固定宽高，则子元素按照该子元素的宽和高，若没有设置该属性的子元素会占满具有display:box属性父元素中剩余的所有的空间。
设置为1则为所有剩余空间，可以为负数。
若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份