ブログBlog
flex-box
投稿日：2016年10月13日
帰山です。
cssのflexboxについて、知っている方は当たり前に知っているのだと思いますが、私は最近まで知りませんでした。
簡単に言えばdivなどの要素の中のアイテムを綺麗に順番に並べてくれるようなものです。
並べると言えばcssのfloatがポピュラーだと思いますが、それに代わる新しいレイアウトモジュールがflexboxとのことです。
floatは確かにいろいろとややこしく、思い通りにいってくれない場面が多々あるので、もっと便利にしてくれないかな……とはずっと思っていたのですが、こんなに素晴らしいものがあったとは、と驚きです。
というか、なんで今まで知らなかったのだろう……と。
floatに比べてレズポンシブデザインなどの画面幅の変更にも柔軟に対応してくれそうなので、今後このflexboxももっとポピュラーになるのではないかと思います。
現状ではSafariで使うのにベンダープレフィックスが必要だったり、古いブラウザでは認識してくれなかったり、と色々不便なところはあるのですが、早くもっと普及して欲しいです。
あと調べてみたらIEの11では部分的にしか対応していないようです。（確認したところ簡単な表示は普通に出来ていましたが、IEは本当に何とかしてほしいです……）
言葉ではflexboxがどのようなものか説明しにくいので、非常に分かりやすく説明している参考サイトを張っておきます。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
flexboxのレイアウトを試せるツール
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/