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
例1 ”row”で並べ、orderは特に何も指定しない #flex1 { display: flex; flex-direction: row; }
例2
例2 単純な逆順であれば”row-reverse”を使う #flex2 { display: flex; flex-direction: row-reverse; }
例3
例3 8番目の要素(p8)のみ−1とする #flex3 .p8 { order: -1; }
★並べられた要素はデフォルトが”0”で、ひとつの要素を−1とすると、それが一番先頭になる(ややこしい)
例4
例4 2つの要素(p4,p6)を指定し、それぞれ1,2とする #flex4 .p4 { order: 1; } #flex4 .p6 { order: 2; }
★例によって0以上の整数にした要素は末尾に移動する。元の順序も残るからか、1、1の指定でも4→6の並びになる挙動を確認できた(追記:正しくは同順の場合HTML記述順になる) サンプルページではなぜか10、11指定だった(?_?)
例5
例5 1〜10で任意の整数を当て並べ替える(寧ろ分かりやすい😃) #flex5 .p5 { order: 1; <=0でも可 } #flex5 .p2 { order: 2; } 〜〜 中略 〜〜 #flex5 .p1 { order: 9; } #flex5 .p6 { order: 10; }
所感
いわゆる配列のインデックスとは考え方が違うので、ややこしかった。 なんとなく数字を入れればそれっぽく動くが、きちんと理解しないと後で困ると思った。 実際にorderで自由に並べ替えるメリット、使い所はどういう所なのかはピンと来なかった。
追記
使い所として、HTMLで読み込ませる順序とレスポンシブ対応に便利とのこと👉なるほど❗