CSSのflexboxを使い、要素の並び順を変更してみる | css | Horic Design

こんにちは。突然ですが、flexboxってご存知ですか？その名の通り、幅を変幻自在に調整できるとてもフレキシブルなボックスで、cssのdisplayのプロパティの１つです。 しかし、flexboxは幅だけではなく、並び順も変えれたりするんですよ。 今回はその並び順に着目したデモを作ってみました。 display:flexに指定された、子要素にorderのプロパティを追加していくだけです。 一番目に表示したければ、order:1となります。 デモ 今回はそのflexboxの表示順を変えられる機能を利用してちょっとした、グリッドシステムを作ってみました。 グリッド幅で表示順と、画面に対する幅が変わります。 画面を縮めてみてください <div class="cs_row"> <div id="a" class="cs_col-xs-12 cs_col-sm-3 cs_col-sm-order-1

[idr_zz]

ワオ！flex boxのorderで順番も簡単に変えられる！ 素晴らしいなぁ。 CSSのflexboxを使い、要素の並び順を変更してみる | css | Horic Design