Flexの使い方

flex-direction

flex-directionは、フレックスコンテナを並べる方向を指定するCSSプロパティです。

flex-direction
説明
row 水平方向(左から右へ) ※デフォルト値
row-reverse 水平方向(右から左へ)
column 垂直方向(上から下へ)
column-reverse 垂直方向(下から上へ)

厳密に言えばdirプロパティに影響を受けるのですが、右から左へと書く言語(アラビア語やヘブライ語など)でなければ無関係なので、ここでは割愛します。

デフォルト

デフォルトでは、フレックスコンテナを左から右へ並べます。つまり、flex-direction: row; と同じです。

<div style="display: flex;">
  <div style="flex: auto;">A</div>
  <div style="flex: auto;">B</div>
  <div style="flex: auto;">C</div>
</div>
A
B
C

row

フレックスコンテナを左から右へ並べます。

<div style="display: flex; flex-direction: row;">
  <div style="flex: auto;">A</div>
  <div style="flex: auto;">B</div>
  <div style="flex: auto;">C</div>
</div>
A
B
C

row-reverse

フレックスコンテナを右から左へ並べます。

<div style="display: flex; flex-direction: row-reverse;">
  <div style="flex: auto;">A</div>
  <div style="flex: auto;">B</div>
  <div style="flex: auto;">C</div>
</div>
A
B
C

column

フレックスコンテナを上から下へ並べます。

<div style="display: flex; flex-direction: column;">
  <div style="flex: auto;">A</div>
  <div style="flex: auto;">B</div>
  <div style="flex: auto;">C</div>
</div>
A
B
C

column-reverse

フレックスコンテナを下から上へ並べます。

<div style="display: flex; flex-direction: column-reverse;">
  <div style="flex: auto;">A</div>
  <div style="flex: auto;">B</div>
  <div style="flex: auto;">C</div>
</div>
A
B
C