box-direction属性使用一个整数值：

.item{ box-ordinal-group: <integer>; /*显示次序：<一个整数，默认为1，数值越小越排前>*/ } 新版语法如下： 定义容器的display属性： .box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行内flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; } 容器样式 .box{ flex-direction: row | row-reverse | column | column-reverse; /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse; /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/ flex-flow: <flex-direction> <flex-wrap>; /*主轴方向和换行简写*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/ }

flex-direction值介绍如下：

row: 默认值。灵活的项目将水平显示，正如一个行一样。

row-reverse: 与 row 相同，但是以相反的顺序。

column: 灵活的项目将垂直显示，正如一个列一样。

column-reverse: 与 column 相同，但是以相反的顺序。

flex-wrap 值介绍如下:

nowrap: flex容器为单行。该情况下flex子项可能会溢出容器。

wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行。

wrap-reverse： 换行并第一行在下方

flex-flow值介绍如下(主轴方向和换行简写)：

<flex-direction>: 定义弹性盒子元素的排列方向

<flex-wrap>：控制flex容器是单行或者多行。

justify-content值介绍如下：

flex-start: 弹性盒子元素将向行起始位置对齐。

flex-end: 弹性盒子元素将向行结束位置对齐。

center: 弹性盒子元素将向行中间位置对齐。

space-between: 第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，

而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around: 伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

align-items值介绍如下:

flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch: 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

align-content值介绍如下:

flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

space-between: 第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，

剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

space-around: 各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。