最終更新日 2021年6月19日

flex-directionプロパティ

flex-directionは、フレキシブルボックス内のボックスの配置方法を指定するプロパティです。

フレキシブルボックスをマルチラインにする場合は、flex-wrapを使用します。

flex-directionとflex-wrapの値をまとめて指定する場合は、flex-flowを使用します。

CSS3での変更点

・flex-directionは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
row	「display: flex;」か「display: inline-flex;」が指定された要素	なし

値	説明
row	各ボックスをコンテンツの書字方向と流れに沿って、インライン要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置します。（初期値）
row-reverse	rowと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置します。
column	各ボックスをコンテンツの書字方向と流れに沿って、ブロックレベル要素の表示方向へ、フレキシブルボックスの開始側から末尾側へと配置します。
column-reverse	columnと同じだが、フレキシブルボックスの末尾側から開始側へと逆向きに配置します。

サンプルコード

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

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。