orderでflexブロック内のアイテムの並び順を任意に変更する方法

投稿日：2021/10/22 ｜最終更新：2021/10/26
CSS・Sass
flex

display: flex;を適用したflexコンテナーの中のflexアイテムの並び順は、通常は設定された方向にhtmlの記述が早い順に並びます。
flexアイテムにorderで並び順を設定すると、htmlの記述順を問わずにorderで指定した並び順で表示することができます。

orderを設定してflexアイテムの並び順を変更してみる

プレビュー

通常は１→２→３→４という順番で表示されるはずが、４にorder: -1;を設定しているため、４が一番左に表示されます。

解説

orderの初期値は0で、負→0→正の数順に表示されます。
↑の例では「４」のブロックにだけ「-1」を設定しているので、「４」が一番左に配置されています。

HTML例

<div class="flex-box">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

CSS例

.flex-box{display: flex;}
.flex-item{
    width: 100px;
    height: 100px;
    display: flex;
    margin: 10px;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #000;
    font-size: .8em;
}
.flex-item:nth-child(4){
    order: -1;
}