君はdisplay:flexというcssを知っているか

Author:
flex5

最近flex-boxというcssを知ったのですが、これすごいですね。
今まで面倒なことしていたのがあっけなく実現できる。
こんなcssがあるとは知りませんでした。

例えば、こんな感じの実装をしたい場合。
flex1
普通なら5~1の順に書くと思いますが、実はこのhtmlコード、1~5で並んでいるのです。

flex2

もちろんfloat:rightなんて使っていません。
これがdisplay:flexという機能なのです。
ちなみにcssはこんな感じ。

flex3

flex-direction:rowとすると左から右、row-reverseで右から左、columnで上から下、column-reverseで下から上の順にブロック要素が並びます。

なかなか面白いですね。
そしてこれだけでは終わらない。こんなこともできるのです。

flex4

これはflex-wrap:wrap-reverse;という要素を入れています。
htmlは何もいじっていません。
だからjqueryのonclickで.css()とか設定させれば自由自在に並び替えできる。
いちいちdomの再構築などいりません。

しかしこんなのがあったとは。
まったく知りませんでしたよ。びっくり。
とりあえず最新ブラウザなら使えるっぽいので、webデザイナーさんはぜひとも覚えておきましょう。

Share on Facebook
Pocket