`flex-direction`属性决定主轴的方向（即项目的排列方向）。它可能有4个值。 > * `row`（默认值）：主轴为水平方向，起点在左端。 > * `row-reverse`：主轴为水平方向，起点在右端。 > * `column`：主轴为垂直方向，起点在上沿。 > * `column-reverse`：主轴为垂直方向，起点在下沿。 ~~~css .box { flex-direction: row | row-reverse | column | column-reverse; } ~~~  ~~~html <div class="box"> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div class="box-item">4</div> </div> ~~~ ~~~css .box { display: flex; background-color: white; } .box-item { width: 200px; height: 200px; line-height: 200px; vertical-align: middle; margin: 5px; background-color: #ffd200; font-size: 100px; color: white; text-align: center; } ~~~ - row（默认值）：主轴为水平方向，起点在左端。 ~~~css .box { flex-direction: row; } ~~~  - row-reverse：主轴为水平方向，起点在右端。 ~~~css .box { flex-direction: row-reverse; } ~~~  - column：主轴为垂直方向，起点在上沿。 ~~~css .box { flex-direction: column; } ~~~  - column-reverse：主轴为垂直方向，起点在下沿。 ~~~css .box { flex-direction: column-reverse; } ~~~