flex-direction：フレックス・コンテナの主軸方向やアイテムの並び方向を指定する

flex-directionプロパティの説明

flex-directionは、フレックス・コンテナの主軸方向やアイテムの並び方向を指定します。ここで指定する値は、フレックス・ボックス・モジュールのアイテムとしてレイアウトされる全ての子要素に影響します。

フレックス・ボックスを扱う時は、垂直方向と水平方向、つまり縦と横という考え方ではなく、主軸（main axis）と交差軸（cross axis）という概念を使います。主軸はコンテナ内の空間でアイテムの並び順を決定する軸です。通常は行と同じ横へ伸びます。交差軸は主軸に対して垂直に交わる軸で、通常は列と同じ縦へ伸びます。これらには、先頭から末尾へと流れる向きがあります。つまり、主軸の方向や向きが変われば、交差軸が表す意味も変わります。

flex-directionは、この主軸の方向や向きを定義するものです。ここで指定された値が基準となってアイテムが配置されます。フレックス・ボックスを使う祭は、よく理解しておくことを推奨します。

flex-directionに指定できる値

row

コンテナの主軸を行方向と同じ横に伸ばします。main-startおよびmain-endの位置は、コンテンツの書字方向と同じになります。

column

コンテナの主軸を列方向と同じ縦に伸ばします。main-startおよびmain-endの位置は、writing-modeにおけるbeforeおよびafterの位置と同じになります。

row-reverse

コンテナの主軸をrowと同じにし、main-startおよびmain-endの位置を逆にします。

column-reverse

コンテナの主軸をcolumnと同じにし、main-startおよびmain-endの位置を逆にします。

flex-directionの使い方とサンプル

flex-directionプロパティの構文は以下の通りです。

/* 主軸を行方向に指定 */
flex-direction: row;

/* 主軸を列方向に指定 */
flex-direction: column;

/* 行方向の逆向き */
flex-direction: row-reverse;

/* 列方向の逆向き */
flex-direction: column-reverse;

/* グローバル値 */
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: unset;

flex-directionの実例

それでは実際にflex-directionプロパティの書き方を見ていきましょう。以下の例では、単純なフレックス・ボックスを用意して、コンテナに異なる値のflex-directionを指定した場合の挙動です。アイテムの並び方や方向が変わっているのが確認できます。

h2 {
	margin-top: 1rem;
	font-size: 1rem;
}
.flex_box {
	overflow: auto;
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	padding: 1rem;
	background: #eee;
}
.flex_item {
	width: 100px;
	padding: .3rem;
	background: #09f;
	color: #fff;
	flex: 1 1 auto;
}
.fd_1 {
	flex-direction: row;
}
.fd_2 {
	flex-direction: column;
}
.fd_3 {
	flex-direction: row-reverse;
}
.fd_4 {
	flex-direction: column-reverse;
}

<h2>flex-direction: row;</h2>
<div class="flex_box fd_1">
	<div class="flex_item">1</div>
	<div class="flex_item">2</div>
	<div class="flex_item">3</div>
</div>

<h2>flex-direction: column;</h2>
<div class="flex_box fd_2">
	<div class="flex_item">1</div>
	<div class="flex_item">2</div>
	<div class="flex_item">3</div>
</div>

<h2>flex-direction: row-reverse;</h2>
<div class="flex_box fd_3">
	<div class="flex_item">1</div>
	<div class="flex_item">2</div>
	<div class="flex_item">3</div>
</div>

<h2>flex-direction: column-reverse;</h2>
<div class="flex_box fd_4">
	<div class="flex_item">1</div>
	<div class="flex_item">2</div>
	<div class="flex_item">3</div>
</div>