ホームへ

【CSS】flexで並び順を変える,逆にする方法

「flexで並び順を変えるにはどうやるんだっけ?」

display:flexで並び順を変える、逆にする方法を解説します。

並び順を逆にする flex-direction

flex-directionはflexとセットで使い、子要素の向きを変えるCSSです。

並び順を縦にしたり逆にするときに使います。

左から右 flex-direction:row(初期値)

flex-direction:rowは初期値であるためとくに指定する必要はありません。

1
2
3
<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:row-reverse

横並びの要素を逆にするにはflex-direction:row-reverseを指定します。

1
2
3
<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:column

子要素を縦並びにするにはflex-direction:columnを指定します。

1
2
3
<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を指定します。

1
2
3
<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を使いましょう。

並び順を指定する order

orderは子要素に指定し、並び順を任意に指定するCSSです。

通常(order指定なし)

1
2
3
4
5
6
7
<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指定

1
2
3
4
5
6
7
<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で並び順を変える、逆にする方法でした。

マンガで読める関連記事