Edited at

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


やったこと


  • flexboxについて調べ学習した

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

参考: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>


例1

スクリーンショット 2018-07-29 23.12.24.png


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


例2

スクリーンショット 2018-07-29 23.13.12.png


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


例3

スクリーンショット 2018-07-29 23.46.52.png

例3  8番目の要素(p8)のみ−1とする

#flex3 .p8 {
order: -1;
}

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


例4

スクリーンショット 2018-07-30 0.07.17.png


例4 2つの要素(p4,p6)を指定し、それぞれ1,2とする
#flex4 .p4 {
order: 1;
}
#flex4 .p6 {
order: 2;
}

★例によって0以上の整数にした要素は末尾に移動する。元の順序も残るからか、1、1の指定でも4→6の並びになる挙動を確認できた(追記:正しくは同順の場合HTML記述順になる)

サンプルページではなぜか10、11指定だった(?_?)


例5

スクリーンショット 2018-07-30 0.19.55.png

例5      1〜10で任意の整数を当て並べ替える(寧ろ分かりやすい😃)

#flex5 .p5 {
order: 1; <=0でも可
}
#flex5 .p2 {
order: 2;
}
〜〜  中略  〜〜
#flex5 .p1 {
order: 9;
}
#flex5 .p6 {
order: 10;
}


所感

いわゆる配列のインデックスとは考え方が違うので、ややこしかった。

なんとなく数字を入れればそれっぽく動くが、きちんと理解しないと後で困ると思った。

実際にorderで自由に並べ替えるメリット、使い所はどういう所なのかはピンと来なかった。


追記

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