flexboxの順序を入れ替える

goto_jp 64views 更新:2016年8月10日

一昔前は左右逆なレイアウトを作る時は float を使うことが多かったですが、CSS3のflexboxを使えば簡単にできます。

See the Pen CSS3 Flexbox : 左右並び替え by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

上記レイアウトはいずれも同一のHTMLで、2つ目のボックスをプロパティ一つで要素の順序を入れ替えています。

.flex2 {
  flex-flow: row-reverse;
}

「flex-flow: row-reverse」でflex要素を逆順に並び替えられます。
左右逆ではなくて逆順なので、要素が3つ以上あれば3,2,1という並び順になります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません