flexbox/flex-direction

ドキュメント：flex-direction - CSS: カスケーディングスタイルシート MDN

フレックスアイテムの並ぶ向き指定。

flex-direction: row

初期値。行方向にフレックスアイテムが並ぶ。

<div style="display: flex; flex-direction: row; background:#ddd">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

flex-direction: row-reverse

行方向にフレックスアイテムが並ぶが、rowと逆向き。

<div style="display: flex; flex-direction: row-reverse; background:#ddd">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

flex-direction: column

列方向にフレックスアイテムが並ぶ。

<div style="display: flex; flex-direction: column; height: 80px; background:#ddd">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b

flex-direction: column-reverse

列方向にフレックスアイテムが並ぶが、columnと逆向き。

<div style="display: flex; flex-direction: column-reverse; height: 80px; background:#ddd">
  <div style="background:#ffb7b7">a</div>
  <div style="background:#b7b7ff">b</div>
</div>
a
b