【CSS】flex-directionの使い方、配置する方向を指定する!

シュウ

今回は【CSS】flex-directionの使い方、配置する方向を指定する!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
displayプロパティについて学びたい方へ
今回はflex-directionで配置する方向についての解説になります。

前回は、基本となる、
display flex / inline-flexについての解説になりました。
【前回の記事 CSS】display flexの使い方、横並びを指定しよう！

Flexboxでは様々なレイアウトが可能になります。
現在はほとんどのブラウザやデバイスが対応していますので、是非参考にしてみてください。
指定項目が多いため、パートに分けて解説していきます。

[記事の内容]

flex-directionの使い方について

flex-directionプロパティとは、flexboxアイテムを配置する方向を指定します。
※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。

親要素 {
	display: flex / inline-flex;
	flex-direction: 方向;

	/*--内訳
	①display: flex;
	②display: inline-flex;
	①か②のどちらかを指定します。
	--*/
}

指定できる値

flex-direction
今回はここを解説！
flexboxアイテムを配置する方向を指定します。
display flex / inline-flex　
解説の記事ありますよ
flexboxコンテナを指定します。

flex-directionの指定について

flex-directionプロパティとは、flexboxアイテム(子要素)を配置する方向を指定します。
指定することにより、「flexboxアイテムを右から左」、「flexboxアイテムを下から上」といったことが
可能になります。

指定できる値

row(初期値)
flexboxアイテム(子要素)を左から右に指定します
row-reverse
flexboxアイテム(子要素)を右から左に指定します
column
flexboxアイテム(子要素)を上から下に指定します
column-reverse
flexboxアイテム(子要素)を下から上に指定します

共通指定について

displayプロパティである、「flex / inline-flex」を親要素に指定することで、その要素をflexboxコンテナ(入れ物、箱)に指定できます。
flexboxコンテナ(親要素)の子要素は自動的にflexboxアイテムのなり、さまざまなレイアウトが可能になります。

ポイント！
①親要素にdisplayプロパティである、「flex / inline-flex」を指定します。
②子要素は自動的にflexboxアイテムになります。
※子要素にdisplayプロパティは指定しないようにしましょう!!

共通HTML・CSS

基本となるHTML

①

②

③

④

⑤

<!--親要素-->
<div class="flex-container">
 <!--子要素-->
 <div class="flex-item">①</div>
 <div class="flex-item">②</div>
 <div class="flex-item">③</div>
 <div class="flex-item">④</div>
 <div class="flex-item">⑤</div>
</div>

/*--親要素--*/
.flex-container {
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	background-color: #1ece50;
	padding: 30px;
	box-sizing: border-box;
}

親要素にdisplayプロパティである、「flex / inline-flex」を指定はしていません。
displayプロパティを指定していないため、子要素は横並びにはならず、左寄せの状態になっております。

row(初期値)の指定について

flex-direction: rowとは、flexboxアイテム(子要素)を左から右に指定します。
初期値になるため、方向に変化はありません。今回はCSSのみ載せております。

/*--上記のHTMLと同じになります--*/

/*--親要素--*/
.flex-container {
	display: flex;
    flex-direction: row; /*--方向の指定--*/
}
/*--子要素--*/
.flex-item {/*--装飾省略--*/}

row-reverseの指定について

flex-direction: row-reverseとは、flexboxアイテム(子要素)を右から左に指定します。
「flexboxアイテム01、02、03」を「flexboxアイテム05、04、03」の水平方向に適用されます。

flex-direction: row-reverseを指定する

①

②

③

④

⑤

/*--上記のHTMLと同じになります--*/

 /*--親要素--*/
.flex-container {
	display: flex;
	flex-direction: row-reverse; /*--方向の指定--*/
	
	/*--以下装飾--*/
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {/*--装飾省略--*/}

columnの指定について

flex-direction: columnとは、flexboxアイテム(子要素)を上から下に指定します。
display: flexで右方向に指定しますが、columnを指定することにより、垂直方向に適用されます。

flex-direction: columnを指定する

①

②

③

④

⑤

/*--上記のHTMLと同じになります--*/

 /*--親要素--*/
.flex-container {
	display: flex;
	flex-direction: column; /*--方向の指定--*/
	
	/*--以下装飾--*/
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {
	/*--装飾省略 marginのみ変更--*/
	margin: 10px 0;
}

column-reverseの指定について

flex-direction: column-reverseとは、flexboxアイテム(子要素)を下から上に指定します。
「flexboxアイテム01、02、03」を「flexboxアイテム05、04、03」の垂直方向に適用されます。

flex-direction: column-reverseを指定する

①

②

③

④

⑤

/*--上記のHTMLと同じになります--*/

 /*--親要素--*/
.flex-container {
	display: flex;
	flex-direction: row-reverse; /*--方向の指定--*/
	
	/*--以下装飾--*/
	background-color: #ffffff;
	border: solid 5px #fb6158;
	padding: 40px;
	box-sizing: border-box;
}

/*--子要素--*/
.flex-item {
	/*--装飾省略 marginのみ変更--*/
	margin: 10px 0;
}