1. 左到右(水平方向)

.box{ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; } 2. 右到左(水平方向) .box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }

如上代码：box 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式。

3. 上到下(垂直方向上) .box{ -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } 4. 下到上（垂直方向上） .box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } 5. 是否允许子元素伸缩 .item{ -webkit-box-flex: 1.0; -moz-flex-grow: 1; -webkit-flex-grow: 1; flex-grow: 1; }

box语法中 box-flex 如果不是0就表示该子元素允许伸缩，而flex是分开的，上面 flex-grow 是允许放大（默认不允许）

.item{ -webkit-box-flex: 1.0; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; flex-shrink: 1; }

flex-shrink 是允许缩小（默认允许）。box-flex 默认值为0，也就是说，在默认的情况下，在两个浏览器中的表现是不一样的：介绍如下：

.item{ box-flex: <value>; /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/ flex-grow: <number>; /* default 0 */ /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/ flex-shrink: <number>; /* default 1 */ /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/ } 6. 子元素的显示次序 .item{ -webkit-box-ordinal-group: 1; -moz-order: 1; -webkit-order: 1; order: 1; } 注意：目前还有一个问题没有弄明白，旧版本中的那个属性对应着新版本的 align-self属性，有知道的请告知，谢谢！