flex-direction

この記事では「flex-direction」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets flex-direction property.

フレックスコンテナ内のアイテムの配置方向を指定する

　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;
}