最終更新日

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;
参考文献:CSS Flexible Box Layout Module外部リンク
HOME