主軸方向プロパティ

最終更新：2026-09-13

flex-direction 主軸方向プロパティ

flex-direction プロパティは、flex コンテナー内の主軸の方向、つまり flex アイテムがどの方向に並ぶかを定義します。デフォルトでは、アイテムは左から右へ水平に並びます（row）。このプロパティでレイアウトを垂直方向や逆順に切り替えられます。これは flexbox における最も基本的な方向制御であり、justify-content と align-items がどちらの軸に作用するかを決定します。

カテゴリ
初期値	row
継承	いいえ
適用対象	すべての要素
アニメーションタイプ	discrete
CSS バージョン	CSS3
状態	標準

📝 構文

flex-direction: row | row-reverse | column | column-reverse;

⚙️ 値

値	タイプ	説明
`row \| row-reverse \| column \| column-reverse`	キーワード	flex 主軸の方向。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
flex-direction	✓ v29	✓ v12	✓ v28	✓ v9	✓ v17
すべての主要ブラウザーでサポート

ヒント： row と row-reverse は水平の主軸に、column と column-reverse は垂直の主軸にアイテムを並べます。主軸が変わると、justify-content と align-items が制御する軸もそれに応じて入れ替わります。

重要： row-reverse と column-reverse はアイテムの視覚的な順序だけを変更し、DOM の順序は変わりません。そのため、スクリーンリーダーの読み順や Tab キーのフォーカス順には影響しません。

❓ よくある質問

Qflex-direction を変えると justify-content と align-items はどうなりますか？

Aflex-direction は主軸を定義します。justify-content は主軸に、align-items は交差軸に作用します。row の場合、justify-content が水平方向の配置を、align-items が垂直方向の配置を制御します。column に切り替えるとこの 2 つの軸は入れ替わります。実践的な影響として、column では justify-content が空間を分配するためにコンテナーに明確な高さが必要です（row では align-items が交差軸の余白を必要とするのと同様）。まず主軸の方向を確認してください。それによってどちらの配置プロパティがどの方向を制御するかが決まります。

Q右から左へのレイアウトを作るには？

A方法は 2 つあります。flex-direction: row-reverse は flex アイテムを右から左へ並べ、その一組のアイテムだけに影響します。一方、コンテナーに direction: rtl を設定すると、書字方向とレイアウト方向が変わり、テキストやインライン要素もそれに従います。両者は見た目は似ていますが意味論的に異なります。レイアウトだけを反転させたい場合は row-reverse を、テキストの方向も変える必要がある場合は direction: rtl を使ってください。

Qflex-direction: column と writing-mode の縦書きの違いは？

A両者はまったく異なります。flex-direction: column は flex アイテムを単に垂直に積み重ねるだけです。各アイテムは引き続き独立したブロックであり、テキストの方向は変わらないため、中のテキストは水平行のまま読めます。一方 writing-mode: vertical-rl はテキストそのものの書き方を変え、文字が垂直方向に流れるようにします。垂直レイアウトには flex-direction: column を、中国語の縦書きのようなテキストの縦組みには writing-mode を使ってください。