CSS

Cascading Style Sheets flex-direction property.

flex-direction

　flex-directionプロパティは、フレックスコンテナ内のアイテムの配置方向を指定する際に使用します。具体的には、フレックスコンテナの主軸方向を設定することで、フレックスアイテムがレイアウトされる方向を決定します。

　尚、row-reverse や column-reverse などの値はフローの方向を反対にしますが、あくまでもフローの方向を変更するだけであり、文字列の記述方向や内容の読み上げ方向などは変更されません。

値

row
フレックスコンテナの主軸は左から右になります。正確に言うと現在のインライン軸の方向と同じになります。（初期値）
row-reverse
フレックスコンテナの主軸方向が row の逆になります。
column
フレックスコンテナの主軸は上から下になります。正確に言うと現在のブロック軸の方向と同じになります。
column-reverse
フレックスコンテナの主軸方向が column の逆になります。

初期値・適用対象・値の継承

初期値
row
適用対象
フレックスコンテナ
値の継承
しない

Sample

flex-direction:row;

①
②
③

flex-direction:row-reverse;

①
②
③

flex-direction:column;

①
②
③

flex-direction:column-reverse;

①
②
③

HTML source


<p>flex-direction:row;</p>
<div class="sample" style="flex-direction:row;">
	<div>①</div>
	<div>②</div>
	<div>③</div>
</div>

<p>flex-direction:row-reverse;</p>
<div class="sample" style="flex-direction:row-reverse;">
	<div>①</div>
	<div>②</div>
	<div>③</div>
</div>

<p>flex-direction:column;</p>
<div class="sample" style="flex-direction:column;">
	<div>①</div>
	<div>②</div>
	<div>③</div>
</div>

<p>flex-direction:column-reverse;</p>
<div class="sample" style="flex-direction:column-reverse;">
	<div>①</div>
	<div>②</div>
	<div>③</div>
</div>

CSS source


.sample {
	display: flex;
	background-color: palegreen;
	margin: 10px;
}

.sample div {
	width: 80px;
	background-color: green;
	margin: 2px;
	padding: 10px;
}