プロパティ flex-direction

プロパティ flex-direction は、主軸と交差軸の方向を設定します。つまり、要素を行または列に配置します。

Flex コンテナの親要素に適用されます。一括指定プロパティ flex-flow の一部です。

構文

セレクタ {
	flex-direction: row | row-reverse | column | column-reverse;
}

値	説明
`row`	主軸は左から右に向かいます。要素は行に配置され、デフォルトでは左端に揃えられ、番号の順序は通常の順序 - 左から右 - です。
`row-reverse`	主軸は右から左に向かいます。要素は行に配置され、デフォルトでは右端に揃えられ、番号の順序は逆の順序 - 右から左 - です。
`column`	主軸は上から下に向かいます。要素は列に配置され、デフォルトでは上端に揃えられ、番号の順序は通常の順序 - 上から下 - です。
`column-reverse`	主軸は下から上に向かいます。要素は列に配置され、デフォルトでは下端に揃えられ、番号の順序は逆の順序 - 下から上 - です。

デフォルト値: row。

要素は行に配置され、デフォルトでは左端に揃えられ、番号の順序は通常の順序 - 左から右 - です:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

要素は行に配置され、デフォルトでは右端に揃えられ、番号の順序は逆の順序 - 右から左 - です:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

要素は列に配置され、デフォルトでは上端に揃えられ、番号の順序は通常の順序 - 上から下 - です:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

要素は列に配置され、デフォルトでは下端に揃えられ、番号の順序は逆の順序 - 下から上 - です:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}