【CSS】flex-directionを使用して要素を横方向、縦方向に並べ替える
2022.03.19
flex-directionを使って、div等の要素を横方向に並べ替えて表示したり、下から上の縦方向に並べ替えて表示するサンプルです。
目次
1. はじめに
以下のようなサンプルを用意しました。
flex-directionでA,B,Cのdiv要素を並び替えて表示してみます。
A
B
C
html
<div class="box">
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
</div>css
.box {
width:100%;
background: gray;
}
.inner {
width:100px;
height: 100px;
background: rgba( 233,0,0, .5);
border: solid 1px black;
}2. 左から右の横並び(row)
flex-direction:rowを指定すると、div要素が左から右の横並びになる。
A
B
C
html
<div class="box">
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
</div>css
.box {
width:100%;
background: gray;
display: flex;
flex-direction: row;
}
.inner {
width:100px;
height: 100px;
background: rgba( 233,0,0, .5);
border: solid 1px black;
}3. 右から左の横並び(row-reverse)
flex-direction:row-reverseを指定すると、div要素が右から左の横並びになる。
A
B
C
html
<div class="box">
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
</div>css
.box {
width:100%;
background: gray;
display: flex;
flex-direction: row-reverse;
}
.inner {
width:100px;
height: 100px;
background: rgba( 233,0,0, .5);
border: solid 1px black;
}4. 上から下の縦並び(column)
この並びの場合、CSSを指定する必要はないが、flex-directionを使用する場合は以下のようにする。
flex-direction:columnを指定してもしなくても、div要素が上から下の横並びになる。
A
B
C
html
<div class="box">
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
</div>css
.box {
width:100%;
background: gray;
display: flex;
flex-direction: column;
}
.inner {
width:100px;
height: 100px;
background: rgba( 233,0,0, .5);
border: solid 1px black;
}5. 下から上の縦並び(column-reverse)
flex-direction:column-reverseを指定すると、div要素が下から上の縦並びになる。
A
B
C
html
<div class="box">
<div class="inner">A</div>
<div class="inner">B</div>
<div class="inner">C</div>
</div>css
.box {
width:100%;
background: gray;
display: flex;
flex-direction: column-reverse;
}
.inner {
width:100px;
height: 100px;
background: rgba( 233,0,0, .5);
border: solid 1px black;
}6. まとめ
並べ替え対象の外側の要素(この例ではboxクラス)のdisplayをflexもしくはinline-flexに設定する。
並べ替え対象の外側の要素(この例ではboxクラス)のflex-directionを設定する。
flex-directionの値は、右から左配置の場合は、rowを設定。
左から右配置の場合は、row-reverseを設定。
上から下配置の場合は、columnを設定。
下から上配置の場合は、column-reverseを設定する。