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

最近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デザイナーさんはぜひとも覚えておきましょう。

Author Info(オガティ

エンジニアとして勤め、インフラ周りの開発を経た後Web業界へ異動。
プライベートでもブログ「ogatism」の運営や電子書籍の執筆、占星術師としての活動など幅広い分野で活動中。
詳細はこちら

占い鑑定レポート作成サービス受付中

◆ ogatismをFeedlyに登録 ◆
follow us in feedly