2 主轴方向

box-orient:

box-orient 属性设置主轴是水平方向还是垂直方向。

-wekkit-box-orient：horizontal | vertical | inline-axis | block-axis
-moz-box-orient：horizontal | vertical | inline-axis | block-axis

该属性有4个值：

• horizontal（默认值）：设置伸缩项目从左到右水平排列

• vertical：设置伸缩项目从上到下纵向排列

• inline-axis：设置伸缩项目沿行轴排列

• block-axis：设置伸缩项目沿块轴排列

box-direction:

box-direction 属性设置伸缩项目的排序顺序是否翻转。

-webkit-box-direction：normal | reverse
-moz-box-direction：normal | reverse

该属性有两个值：

• normal（默认）：设置伸缩项目按正常顺序排列

• reverse：反转伸缩盒项目的排列顺序

• 可以通过 box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果；
• 可以通过box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果；
• 可以通过box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果；
• 可以通过box-orient:vertical + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果；
• Firefox 设置 box-direction 为 reverse 时，在将伸缩项目的排列顺序反转的同时也将伸缩项目的对齐方式逆转了；Safari 和 Chrome则只是反转元素排列顺序

注意： 旧版语法中并没有类似新版语法中 flex-wrap 和 flex-flow的属性。