`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; } ~~~