【CSS】flexで逆順、逆並びにする方法
「flexで並び順を逆にするにはどうやるんだっけ？」
display:flexで並び順を変える、逆にする方法を解説します。
目次
【並び順を逆にする】flex-direction
flex-directionはflexとセットで使い、子要素の向きを変えるCSSです。
並び順を縦にしたり逆にするときに使います。
flex-direction:row-reverseを指定すると逆順になります。
【右から左】flex-direction:row-reverse
横並びの要素を逆にするにはflex-direction:row-reverseを指定します。
<style>
.example2{
display: flex;
/*コレ*/flex-direction: row-reverse;
align-items: flex-start;
border: 1px solid #999;
padding: 5px;
background: #ddf3f8;
height: 250px;
}
.example2 div{
border: 1px solid #999;
padding: 10px 20px;
margin: 5px;
background: #FFF;
}
</style>
<div class="example2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>flex-direction:row-reverseを指定すると並び順が逆になると同時に右寄せになります。
並び順が逆になるというより、右から順に並ぶと考えた方がいいでしょう。
左に寄せたい場合は親要素を子要素の合計幅に合わせるか、後述するorderを使いましょう。
【左から右】flex-direction:row（初期値）
flex-direction:rowは初期値であるためとくに指定する必要はありません。
<style>
.example{
display: flex;
/*コレ*/flex-direction: row;
align-items: flex-start;
border: 1px solid #999;
padding: 5px;
background: #ddf3f8;
height: 250px;
}
.example div{
border: 1px solid #999;
padding: 10px 20px;
margin: 5px;
background: #FFF;
}
</style>
<div class="example">
<div>1</div>
<div>2</div>
<div>3</div>
</div>【上から下】flex-direction:column
子要素を縦並びにするにはflex-direction:columnを指定します。
<style>
.example3{
display: flex;
/*コレ*/flex-direction: column;
align-items: flex-start;
border: 1px solid #999;
padding: 5px;
background: #ddf3f8;
height: 250px;
}
.example3 div{
border: 1px solid #999;
padding: 10px 20px;
margin: 5px;
background: #FFF;
}
</style>
<div class="example3">
<div>1</div>
<div>2</div>
<div>3</div>
</div>縦並びのときの注意です。
align-itemsは通常、子要素の縦位置の調整ですが、縦並びにすると横位置の調整になります。
justify-contentも同様に、横位置の調整から縦位置の調整に変わります。
これはflex-direction:columnによって軸、向きが90度変わり、align-itemsやjustify-contentの影響も90度変わるためです。
【下から上】flex-direction:column-reverse
縦並びの要素を逆にするにはflex-direction:column-reverseを指定します。
<style>
.example4{
display: flex;
/*コレ*/flex-direction: column-reverse;
align-items: flex-start;
border: 1px solid #999;
padding: 5px;
background: #ddf3f8;
height: 250px;
}
.example4 div{
border: 1px solid #999;
padding: 10px 20px;
margin: 5px;
background: #FFF;
}
</style>
<div class="example4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>flex-direction:column-reverseを指定すると並び順が逆になると同時に下寄せになります。
並び順が逆になるというより、下から順に並ぶと考えた方がいいでしょう。
上に寄せたい場合は親要素の高さをautoにするか、子要素の合計高さに合わせる、または後述するorderを使いましょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
【並び順を指定する】order
orderは子要素に指定し、並び順を任意に指定するCSSです。
通常（order指定なし）
<div class="example5">
<div style="background: #ffffff">1</div>
<div style="background: #fcd5d5">2</div>
<div style="background: #ffadad">3</div>
<div style="background: #ff7f7f">4</div>
<div style="background: #ff5656">5</div>
<div style="background: #ff2222">6</div>
<div style="background: #ff0000">7</div>
</div>
<style>
.example5{
display: flex;
flex-direction: column;
border: 1px solid #999;
padding: 5px;
background: #ddf3f8;
}
.example5 div{
border: 1px solid #999;
padding: 10px 20px;
margin: 5px;
}
</style>order指定
<div class="example5">
<div style="order: 5; background: #ffffff">1</div>
<div style="order: 7; background: #fcd5d5">2</div>
<div style="order: 2; background: #ffadad">3</div>
<div style="order: 6; background: #ff7f7f">4</div>
<div style="order: 4; background: #ff5656">5</div>
<div style="order: 1; background: #ff2222">6</div>
<div style="order: 3; background: #ff0000">7</div>
</div>
<style>
.example5{
display: flex;
flex-direction: column;
border: 1px solid #999;
padding: 5px;
background: #ddf3f8;
}
.example5 div{
border: 1px solid #999;
padding: 10px 20px;
margin: 5px;
}
</style>flexとセットで使うCSSの多くは親要素に指定しますが、orderは子要素に指定します。
orderは兄弟要素の並び替えしかできません。親子要素の並び替えはできません。
orderの数値が同じとき、後述された方が後になります。
orderはマイナス値も指定可能です。
order未指定の場合、-1と0の間に配置されます。
まとめ
並び順を逆にする flex-direction
- 左から右 flex-direction:row（初期値）
- 右から左 flex-direction:row-reverse
- 上から下 flex-direction:column
- 下から上 flex-direction:column-reverse
並び順を指定する order
以上、display:flexで並び順を変える、逆にする方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
