flexboxの使い方メモ

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で並び替えしてしまった方がはるかに効率的ですよねってお話。

この記事を書いた人

CORUN

「たぶん、できるんじゃないかな。」
それがコンセプトであり、なりたい自分の一人。
Webのお仕事やっております。