最近flex-boxというcssを知ったのですが、これすごいですね。
今まで面倒なことしていたのがあっけなく実現できる。
こんなcssがあるとは知りませんでした。
例えば、こんな感じの実装をしたい場合。
普通なら5～1の順に書くと思いますが、実はこのhtmlコード、1～5で並んでいるのです。
もちろんfloat:rightなんて使っていません。
これがdisplay:flexという機能なのです。
ちなみにcssはこんな感じ。
flex-direction:rowとすると左から右、row-reverseで右から左、columnで上から下、column-reverseで下から上の順にブロック要素が並びます。
なかなか面白いですね。
そしてこれだけでは終わらない。こんなこともできるのです。
これはflex-wrap:wrap-reverse;という要素を入れています。
htmlは何もいじっていません。
だからjqueryのonclickで.css()とか設定させれば自由自在に並び替えできる。
いちいちdomの再構築などいりません。
しかしこんなのがあったとは。
まったく知りませんでしたよ。びっくり。
とりあえず最新ブラウザなら使えるっぽいので、webデザイナーさんはぜひとも覚えておきましょう。
