CSS flex-direction 属性

JPKODA 編集部 May 6, 2026

CSS Flexboxにおいて、flex-direction はコンテナ内のアイテムのレイアウトを制御する最も基礎的なプロパティです。これはフレックスアイテム（Flex Items）が並ぶ方向を決定し、本質的にはFlexboxの主軸（Main Axis）を定義します。

flex-direction を理解し活用することで、ブラウザのデフォルトの排版挙動に縛られることなく、複雑なウェブデザインのニーズに応える自由なレイアウト構築が可能になります。

1. flex-direction プロパティの理解

flex-direction プロパティは、フレックスコンテナ（Flex Container）内での子アイテムの並び方向を指定します。主に以下の4つの値を受け入れます。

row (デフォルト値): フレックスアイテムを水平方向に並べます。左から右へと配置されます（左から右に読む言語環境の場合）。
row-reverse: フレックスアイテムを水平方向に並べますが、順序は逆になります。右から左へと配置されます。
column: フレックスアイテムを垂直方向に積み重ねて並べます。上から下へと配置されます。
column-reverse: フレックスアイテムを垂直方向に積み重ねますが、順序は逆になります。下から上へと配置されます。

1.1 row：デフォルトの水平配置

フレックスコンテナを作成した際、デフォルトの flex-direction は row に設定されています。これにより、アイテムは自動的に左から右へ水平に整列します。

コード例：

<div class="container">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>

.container {
  display: flex;
  /* flex-direction: row; これはデフォルト挙動のため省略可能です */
  background-color: #f0f0f0;
  padding: 10px;
}

.container > div {
  background-color: #ddd;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

この例では、「アイテム 1」「アイテム 2」「アイテム 3」が同一行内に水平に表示されます。

1.2 row-reverse：水平方向の逆順配置

row-reverse を使用すると、行内のアイテム順序を反転させることができます。配置は水平方向のままですが、起点が右側になり、左に向かって伸びていきます。

コード例：

.container {
  display: flex;
  flex-direction: row-reverse; /* 水平方向の逆順 */
  background-color: #f0f0f0;
  padding: 10px;
}

この設定により、画面上では左から順に「アイテム 3」「アイテム 2」「アイテム 1」と表示されます。これは、基盤となるHTML構造を変更することなくビジュアル上の順序を調整したい場合に非常に有用であり、アクセシビリティ（Accessibility）やSEOの観点からもメリットがあります。

1.3 column：垂直方向のスタック配置

flex-direction を column に設定すると、主軸（Main Axis）が水平から垂直へと切り替わります。アイテムは積み木のように上から下へと垂直にスタックされます。

コード例：

.container {
  display: flex;
  flex-direction: column; /* 垂直配置 */
  background-color: #f0f0f0;
  padding: 10px;
}

この場合、アイテムは垂直に並び、一番上が「アイテム 1」、次いで「アイテム 2」、一番下が「アイテム 3」となります。垂直ナビゲーションメニューの作成や、特定の順序でコンテンツを積み重ねる際に最適な手法です。

1.4 column-reverse：垂直方向の逆順配置

その名の通り、column-reverse は垂直スタックの順序を反転させます。アイテムは垂直に並びますが、起点が底辺となり、上に向かって配置されます。

コード例：

.container {
  display: flex;
  flex-direction: column-reverse; /* 垂直方向の逆順 */
  background-color: #f0f0f0;
  padding: 10px;
}

この設定では、上から順に「アイテム 3」「アイテム 2」「アイテム 1」と表示されます。row-reverse と同様に、コンテンツを視覚的に再構成する際に役立ちます。