こんにちは、フロントエンジニアのTAKAです。
今回は知っているとコーディングが簡単になる魔法の箱「Flexbox」の使い方をご紹介致します！
そもそもFlexboxって何さ！？
Flexboxは、テーブルレイアウトやfloatに続く第三のレイアウト方法です。
横並びのレイアウトといえばやはり代表的なのはこのテーブルとfloatでしょう。
See the Pen BQERoM by Professa (@Professa) on CodePen.
そんな中出てきたのが、フレキシブルで簡単にレイアウトを構成することができるFlexboxの存在です。それではサンプルを見てきましょう。
See the Pen XNQRVg by Professa (@Professa) on CodePen.
こちらはFlexboxとプロパティを使用して横並びに配置しました。
横並び・中央揃えという要素をfloatで再現する場合、widthに%を使ったりする必要があったりするのですが、なんとFlexboxでは二種類のcssプロパティで再現出来てしまいます。
ただしデメリットも…
Flexboxは便利ではありますが、全てのブラウザに対応しているわけではありません。
以下の図が対応しているブラウザです。
緑で表示されている箇所が対応しており、Flexboxが使えます。IE11ではまだバグがありますので注意が必要です。
詳細も見ていただければ分かるかと思いますが、特にIE8及びIE9に関しては全くの非対応で、これっぽっちも反映されません。
絶対にIE9とIE8は対応出来ない？
実は旧IEに対応させるためのjavaScriptが存在します。
それがflexibilityです。
flexibility
See the Pen dOBqqY by Professa (@Professa) on CodePen.
scriptを読み込ませて、クラスにプロパティを追加すれば、旧IEにもFlexboxを対応させることが出来ます……が完全ではありませんので、旧IE以下にも対応させるのであればやはり別のやり方がよいかと思われます。あくまで参考にどうぞ。
これだけじゃないFlexbox、数多のプロパティを駆使すると…
See the Pen MbMJop by Professa (@Professa) on CodePen.
こちらは左にロゴ、右にボタンを配置したよくあるヘッダー画面ですが、こちらも数行で簡単に配置出来ます。
See the Pen YpoNag by Professa (@Professa) on CodePen.
またカラムのような部分もこのように簡単に横並び出来ます。今回は黄色の箇所のみflex:2;を指定し、残りのボックスに対してflex:1;を指定しています。
これによって黄色のボックスは2つ分の横幅になります。たった数行書き足しただけでこんなに簡単にレイアウトを変えることが出来ます。
最新のテクニックで簡単にレイアウトが出来上がる
いかがでしたでしょうか？最新のブラウザならばほぼ全て対応のFlexboxを使えば、今まで時間がかかっていたあのレイアウトも、作ったはいいけれどもメンテナンスが大変だったあのレイアウトも簡単に構築することが出来ます。
皆さんも是非うまく活用してみてください。
