flex-direction

Flexboxの項目が並ぶ主軸の向きを決めるプロパティ。インライン軸・ブロック軸と、その逆向きを切り替えて比べられます。

遊んでみよう

横書きで比較・数字はHTMLに書かれた順序

123

row

CSS

.element flex-direction: row;

値のパターン

主軸の向き flex-direction

flex-directionの構成要素

01row | column

主軸に使う論理軸を選ぶ

rowはインライン軸、columnはブロック軸を主軸にします。横書きでは横方向と縦方向です。

02*-reverse

主軸の始点と終点を反転

row-reverseとcolumn-reverseは、軸そのものは変えず、主軸の始点と終点を入れ替えます。

03display: flex

フレックスコンテナーに指定

flex-directionはdisplay: flexまたはinline-flexの要素に指定し、直接の子要素の並びを変えます。

早見表

初期値はrowです。インライン軸・ブロック軸と通常・逆向きの組み合わせで、主軸を4通りに切り替えます。

01rowインライン軸に沿って並べる初期値

02row-reverseインライン軸を逆向きにするrow・反転

03columnブロック軸に沿って並べるcolumn

04column-reverseブロック軸を逆向きにするcolumn・反転

05initial初期値のrowへ戻すグローバル

06inherit親要素の指定値を受け継ぐグローバル

よくある使い方

カードを横一列に並べる

横書きの親要素でrowを使うと、直接の子要素を文章の進むインライン軸に沿って横へ並べられます。

.cards { display: flex; flex-direction: row; }

フォームの項目を縦に積む

横書きの親要素でcolumnを指定すると、ラベルや入力欄をブロック軸に沿って上から下へ積み重ねられます。

.form { display: flex; flex-direction: column; }

狭い画面だけ縦並びにする

横書きでは、メディアクエリーでrowからcolumnへ切り替えると、狭い画面だけ縦並びにできます。

@media (max-width: 48rem) { .nav { flex-direction: column; } }

ポイント

reverseで見た目だけの順序を入れ替えない。

row-reverseとcolumn-reverseは表示上の並びを反転しますが、HTMLのDOM順や読み上げ順、キーボードのフォーカス順は変えません。内容の順序に意味がある場合は、見た目だけを反転させずHTMLを正しい順序で書きます。rowはインライン軸、columnはブロック軸に対応するため、見た目の方向はwriting-modeやdirectionの影響を受けます。flex-directionの初期値はrowで、フレックスコンテナーに適用され、子要素へ継承されません。