ulリスト、olリストの行列並び替え
リスト表示の際に、2列表示且つ縦に読ませる感じのパターン結構ありますよね。
- 1
- 5
- 2
- 6
- 3
- 7
- 4
- 8
こんな感じのを縦並びにすると
- 1
- 5
- 2
- 6
- 3
- 7
- 4
- 8
こうなる。
PCからスマホ表示の場合1列にするってなると、順番めちゃくちゃになる。
これをflex使える環境ならこれで並び替えしちゃおうぜって話です。
ul{
display:flex;
/*flexにしてから*/
}
ul li:nth-child(2n+1){
order:-1;
/*奇数番目を先頭に*/
}
奇数番目に来たものを順番に先頭にしていく仕組み。
- 1
- 5
- 2
- 6
- 3
- 7
- 4
- 8
するとこんな感じに行列が入れ替わります。
- 1
- 5
- 2
- 6
- 3
- 7
- 4
- 8
1列表示でスッキリ。
まとめ
逆のことできるのか試してみたが、キレイにいかない。
多分、html書き直したほうがいいレベル。
今回のパターンも本来htmlを別途スマホ用に準備すればいいだけの話なのだが、そのスマホ用のコード量があまりにも多かった場合はorderで並び替えしてしまった方がはるかに効率的ですよねってお話。