flexboxの"order"がややこしかったので図解してみた #CSS

やったこと

flexboxについて調べ学習した
orderプロパティについて分かりづらかったのでこれだけ図解でまとめた

orderプロパティとは

個別のアイテムの順序を指定出来る
アイテムはデフォルトでは0の値を取り、正や負の整数値を設定する👈重要❗

前提

1~10の要素についてCSSのみで並べ替えを行う

基本html

<div class="samplebox" id="flex1">
        <p class="p1">ボックス<strong>①</strong></p>
        <p class="p2">ボックス<strong>②</strong></p>
        <p class="p3">ボックス<strong>③</strong></p>
        <p class="p4">ボックス<strong>④</strong></p>
        <p class="p5">ボックス<strong>⑤</strong></p>
        <p class="p6">ボックス<strong>⑥</strong></p>
        <p class="p7">ボックス<strong>⑦</strong></p>
        <p class="p8">ボックス<strong>⑧</strong></p>
        <p class="p9">ボックス<strong>⑨</strong></p>
        <p class="p0">ボックス<strong>⑩</strong></p>
    </div>

例１


例１　　”row”で並べ、orderは特に何も指定しない
#flex1 {
    display: flex;
    flex-direction: row;
}

例２


例２　　単純な逆順であれば”row-reverse”を使う
#flex2 {
    display: flex;
    flex-direction: row-reverse;
}

例３

例３　 ８番目の要素（p8）のみ−１とする
#flex3 .p8 {
    order: -1;
}

★並べられた要素はデフォルトが”０”で、ひとつの要素を−１とすると、それが一番先頭になる（ややこしい）

例４


例４　２つの要素（p4,p6）を指定し、それぞれ１，２とする
#flex4 .p4 {
    order: 1;
}
#flex4 .p6 {
    order: 2;
}

★例によって０以上の整数にした要素は末尾に移動する。元の順序も残るからか、１、１の指定でも４→６の並びになる挙動を確認できた（追記：正しくは同順の場合HTML記述順になる）
サンプルページではなぜか１０、１１指定だった(?_?)

例５

例５　　　　　　１〜１０で任意の整数を当て並べ替える（寧ろ分かりやすい😃）
#flex5 .p5 {
    order: 1;　<=0でも可
}
#flex5 .p2 {
    order: 2;
}
〜〜　　中略　　〜〜
#flex5 .p1 {
    order: 9;
}
#flex5 .p6 {
    order: 10;
}

所感

いわゆる配列のインデックスとは考え方が違うので、ややこしかった。
なんとなく数字を入れればそれっぽく動くが、きちんと理解しないと後で困ると思った。
実際にorderで自由に並べ替えるメリット、使い所はどういう所なのかはピンと来なかった。

追記

使い所として、HTMLで読み込ませる順序とレスポンシブ対応に便利とのこと👉なるほど❗