flexboxを使ってみよう！

久々にHTML・CSSについてです。
これまでホームページのレイアウトを組上げていくにはCSSのfloatプロパティを使用し、ボックスを並べて段組みを作る作業を行っていました。
CSS3では新しくflexboxというプロパティを使うことで、段組みを簡単かつ便利に作成できるようになりました。では、使い方を見てみましょう。

1.まずは使ってみる

See the Pen dGxjRo by SHUHEI　NIINO (@emplos-niino) on CodePen.

ULの中にliが4つ入ったメニューボタンなどでよく見かけるソースコードですね。
liにオレンジの背景色を加え余白を入れています。
以前ならば各liに横幅を設定し、floatで横並びにするのが一般的でしたが…

See the Pen JGgBMj by SHUHEI　NIINO (@emplos-niino) on CodePen.

上記のように横並びにしたいボックスを囲んでいる親要素(見本ではliを囲んでいるul)に対してdispalyプロパティをflexと指定するだけで、各liにfloatをかけた状態と同じになります。clearなどの後処理も必要ありませんのでかんたんですね。

2.便利な使い方

次はflexboxの設定で、ボックスの並べ方を指定してみましょう。

See the Pen vLoaPx by SHUHEI　NIINO (@emplos-niino) on CodePen.

ulに「justify-content: space-between;」と追加をしました。これは「ボックスを均等割り付けで配置する」という設定です。
均等割り付けもたった一行でできてしまいます。すごい！

See the Pen rxXrbX by SHUHEI　NIINO (@emplos-niino) on CodePen.

次は「justify-content: center;」と入力しました。ボックスが中心に配置されます。positionいらずで便利！

このような感じでレイアウトを組むのがとても楽になりましたが、IE11以下のバージョンでは表示がおかしくなるもしくは効かないので注意をしましょう。
なので当面の間は制作案件によりfloatとflexboxを使い分けるのが良いでしょう。