flex-direction

/* 横並び（初期値） */
.container { display: flex; flex-direction: row;}

/* 縦並び */
.container-vertical { display: flex; flex-direction: column;}

/* 横並び（逆順） */
.container-reverse { display: flex; flex-direction: row-reverse;}

/* 縦並び（逆順） */
.container-reverse-v { display: flex; flex-direction: column-reverse;}

デスクトップ

Chrome

29 以降 ○

28 △

27 △

26 △

25 △

24 △

23 △

22 △

21 △

↑ prefix『-webkit-』が必要

20 以前 ×

Firefox

28 以降 ○

27 △

26 △

25 △

24 △

23 △

22 △

↑ 部分的なサポート

21 以前 ×

Safari

9 以降 ○

8 △

7.1 △

7 △

6.1 △

↑ prefix『-webkit-』が必要

6 以前 ×

Edge

12 以降 ○

全バージョンで対応しています

IE

11 △

一部バグあり

10 △

prefix『-ms-』が必要

9 ×

8 ×

7 ×

6 ×

Opera

15 以降 ○

12.1 ○

12 ×

11 以前 ×

モバイル

iOS Safari

9 以降 ○

8.4 △

8 △

7.1 △

7 △

↑ prefix『-webkit-』が必要

6.1 以前 ×

Android Browser

4.4 ○

4.3 △

4.2 △

4.1 △

↑ prefix『-webkit-』が必要

4.0 ×

3.0 ×

2.3 ×

2.2 ×

2.1 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は Can I Use に基づいています。

『flex-direction』はFlexboxレイアウトにおける最も基本的なプロパティです。このプロパティは『display』プロパティに『flex』または『inline-flex』が指定された要素（フレックスコンテナ）に対して使用し、子要素（フレックスアイテム）が並ぶ方向を決定します。

Flexboxを理解する上で最も重要な概念が「主軸（main axis）」と「交差軸（cross axis）」です。『flex-direction』の値によってこの2つの軸の方向が決まり、他のFlexboxプロパティの動作もこの軸に基づきます。

『justify-content』プロパティは主軸方向の配置、『align-items』プロパティは交差軸方向の配置を制御します。つまり『flex-direction』の値を変えると、『justify-content』と『align-items』が効く方向も入れ替わります。

/* rowの場合: justify-contentは「横方向」、align-itemsは「縦方向」に効く */
.row-container {
    display: flex;
    flex-direction: row;
    justify-content: center;  /* 横方向の中央揃え */
    align-items: center;      /* 縦方向の中央揃え */
}

/* columnの場合: justify-contentは「縦方向」、align-itemsは「横方向」に効く */
.column-container {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* 縦方向の中央揃え */
    align-items: center;      /* 横方向の中央揃え */
}

アイテムを文書の記述方向と同じ向きに横に並べます。日本語や英語など左から右に書く言語（LTR）では左から右へ、アラビア語など右から左に書く言語（RTL）では右から左に並びます。最も頻繁に使用される値で、ナビゲーションメニューやカードの横並びなどに適しています。

『row』の逆方向にアイテムを並べます。LTRの場合は右から左へ配置されます。視覚的な並び順だけが変わり、DOMの順序は変わりません（アクセシビリティの注意点については後述します）。

アイテムをブロック軸の方向（通常は上から下）に縦に並べます。サイドバーのメニューやフォームの項目の縦並びなどに適しています。『column』を使う場合、フレックスコンテナに明示的な『height』を指定しないと『flex-wrap』による折り返しや『justify-content』によるアイテム間のスペース調整が効かない点に注意が必要です。

『column』の逆方向にアイテムを並べます。通常は下から上へ配置されます。チャットUIのメッセージ表示（最新が下に表示される）など、限られた場面で使われます。

/* ロゴとナビゲーションリンクを横並びに */
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

/* カード内の要素を縦に並べてフッターを下に固定 */
.card {
    display: flex;
    flex-direction: column;
    height: 300px;
}
.card-body {
    flex: 1;  /* 残りの空間を埋める */
}
.card-footer {
    /* flex: 1を指定しないため、自然な高さで下に配置される */
}

/* PC: 横並び → スマートフォン: 縦並び */
.layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
}

これはFlexboxの最も実用的なパターンの一つです。『flex-direction』の値をメディアクエリで切り替えるだけで、PCでは横並び・スマートフォンでは縦並びのレスポンシブレイアウトが実現できます。

『row』と『row-reverse』の並び方向は、HTMLの『dir』属性（文書の記述方向）によって変わります。日本語や英語のサイトでは通常意識する必要はありませんが、アラビア語やヘブライ語など右から左に書く言語（RTL）のサイトを扱う場合に関係してきます。

<!-- 通常の日本語・英語サイト（ltr） -->
<div style="display: flex; flex-direction: row;">
    <div>Item 1</div>  <!-- 左 -->
    <div>Item 2</div>
    <div>Item 3</div>  <!-- 右 -->
</div>

<!-- アラビア語サイトなど（rtl） -->
<div dir="rtl" style="display: flex; flex-direction: row;">
    <div>Item 1</div>  <!-- 右 -->
    <div>Item 2</div>
    <div>Item 3</div>  <!-- 左 -->
</div>

つまり『row』は「左から右」ではなく「文書の記述方向と同じ向き」、『row-reverse』は「その逆向き」という意味になります。なお『column』と『column-reverse』は『dir』属性の影響を受けません。

『writing-mode: vertical-rl』（縦書き）を指定した要素内では、主軸と交差軸の方向が通常とは異なります。

日本語の縦書きレイアウトを扱う場合は、『row』と『column』の効く方向が入れ替わることを把握しておく必要があります。

『row-reverse』と『column-reverse』を使用する際は、アクセシビリティへの影響を考慮する必要があります。

これらの値はCSSによる視覚的な表示順序を変えるだけで、HTMLのDOM順序は変わりません。スクリーンリーダーやキーボードのTabキーによるナビゲーションはDOM順序に従うため、見た目の並び順と操作順序にずれが生じます。

/* 例: 視覚的には「C → B → A」だが、Tabキーでは「A → B → C」の順にフォーカスが移動する */
.container {
    display: flex;
    flex-direction: row-reverse;
}

/* この中にリンクやボタンが含まれていると */
/* 「右のボタンを押したいのに、Tabでは左のボタンに先にフォーカスが当たる」という現象が起きる */

純粋に装飾的な並び替え（テキストのみで操作要素を含まない場合など）であれば大きな問題にはなりませんが、ナビゲーションメニューやフォームなど操作を伴う要素に『reverse』を使う場合は、できるだけHTML側の順序を変えることで対応しましょう。

『flex-direction: column』で『justify-content』を使って縦方向にアイテムを配置しようとしたとき、フレックスコンテナに『height』が指定されていないと効果がありません。コンテナの高さが中身の合計と同じになるため、配置を調整する余白がないからです。

/* NG: heightがないのでjustify-contentが効かない */
.container-ng {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* 効果なし */
}

/* OK: heightを指定すると効くようになる */
.container-ok {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}

『row-reverse』を指定すると、主軸の方向自体が反転します。そのため『justify-content: flex-start』は「右端」に、『flex-end』は「左端」にアイテムを寄せます。直感と逆になりやすいので注意が必要です。

アイテムの順序を個別に変えたい場合は『order』プロパティを使います。『flex-direction』の『reverse』は全体の並びを一括で反転させるため、特定のアイテムだけ移動させることはできません。