最終更新日
flex-directionは、フレキシブルボックス内のボックスの配置方法を指定するプロパティです。
フレキシブルボックスをマルチラインにする場合は、flex-wrapを使用します。
flex-directionとflex-wrapの値をまとめて指定する場合は、flex-flowを使用します。
初期値 | 適用先 | 継承 |
---|---|---|
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;