CSS3中的 Flexible Box，或者叫flexbox，是用于排列元素的一种布局模式。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

start

flex-direction

flex-direction属性取决于主轴的方向，一共有4中排列方式

.flex-container.row{
  flex-direction: row;  
}
.flex-container.row-reverse{
    flex-direction: row-reverse;
}
.flex-container.column{
    flex-direction: column;
}
.flex-container.column-reverse{
    flex-direction: column-reverse;
}

1 row

row(默认值)：主轴为水平方向，起始位置在最左端，从左往右依次排列。

2 row-reverse

row-reverse: 主轴为水平方向，起始位置在最右端，从右往左依次排列。

3 column

column： 主轴为竖直方向，起点在最顶端，从上往下依次排列。

4 column-reverse

column-reverse: 主轴为竖直方向，起点在最底端，从下往上依次排列。

5 result