flex-direction

レイアウト・配置

フレックスコンテナ内のアイテムの配置方向を指定するプロパティです。

構文

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

コード例

1

flex-direction: row;
実行結果
1
2
3

横方向(左から右)に配置(デフォルト)

2

flex-direction: column;
実行結果
1
2
3

縦方向(上から下)に配置

💡 TIPS

レスポンシブデザインでは、画面サイズに応じてrowとcolumnを切り替えることが多い。

⚠️ よくある間違い

親要素にdisplay: flexを指定し忘れると効果がない。

関連プロパティ

ブラウザサポート

IE11+, 全モダンブラウザ