ブログ投稿日時：
ブログ更新日時：
flex-directionについて解説
1.
flex-direction とは
flex-directionは子要素の並ぶ向きを指定するプロパティです。
2.
flex-direction の指定方法
flex-direction で使える値は下記の4つです。
row（初期値）… 子要素を左から右に配置
row-reverse … 子要素を右から左に配置
column … 子要素を上から下に配置
column-reverse … 子要素を下から上に配置
それではそれぞれの指定方法と表示を見ていきましょう。
flex-direction: row; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.items {
display: flex;
flex-direction: row;
gap: 16px;
}
.item {
width: calc((100% - 16px * 3) / 4);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
上記のように flex-direction: row; を指定すると子要素が左から右に配置されます。
flex-direction: row-reverse; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.items {
display: flex;
flex-direction: row-reverse;
gap: 16px;
}
.item {
width: calc((100% - 16px * 3) / 4);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
上記のように flex-direction: row-reverse; を指定すると子要素が右から左に配置されます。
flex-direction: column; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.items {
display: flex;
flex-direction: column;
gap: 16px;
}
.item {
width: calc((100% - 16px * 3) / 4);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
上記のように flex-direction: column; を指定すると子要素が上から下に配置されます。
flex-direction: column-reverse; の指定方法と表示
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>.items {
display: flex;
flex-direction: column-reverse;
gap: 16px;
}
.item {
width: calc((100% - 16px * 3) / 4);
height: 50px;
background-color: #ff0000;
color: #fff;
}HTMLとCSSの表示
1
2
3
4
上記のように flex-direction: column; を指定すると子要素が下から上に配置されます。
3.
今回のまとめ
この記事では flex-direction について解説しました。
flex-direction はレスポンシブの際によく使うので、忘れそうな方はこの記事をブクマしていただけると嬉しいです。
最後までお読みいただきありがとうございます。