Nedia What's up!

ネディアのエンジニアによるIT技術やサービスの紹介・検証などをお届け!

【CSS】Flexboxでレイアウト


CSSの小技 その6
今回は「Flexboxでレイアウト」です。
何やらFlexbox(Flexible Box Layout Module)が横並びレイアウトに便利らしいとの情報を聞きつけました。
モダンブラウザであれば問題なく利用できるらしいので早速実践投入したところ、
使ってみた感想「なるほどこれは便利だ」というわけで記事にしてみます。

ここが便利!Flexbox

実際に使ってみて感じた今までの手法との違いは
・とにかく簡単なのでコーディングの工数短縮
・要素を等間隔に並べる、要素の高さを揃えることが容易
・上下左右の中央揃えもすんなり
こんなところです。
デメリットや使いにくい部分は特にありませんでした。

実装方法

やはりナビゲーションが一番わかり易いと思いますので、そちらでやってみましょう。

HTML

CSS

アレンジ

上記のままだと右側に空間がでていますので均等幅にします。
さらに、レスポンシブなナビゲーションにしてみます。
横幅を調整して「HOME」のボタンのみ半分の横幅にしました。

HTML

CSS

最後に

以前、display:tableを紹介しましたが、負けず劣らずdisplay: flex;も便利です。
個人的に完全な均等幅だけでなく、個別に幅を調整出来るのが便利と感じました。
他にもflex-direction flex-grow flex-shrink flex-basis justify-content align-items align-self align-contentなど
様々なプロパティを使えるらしいので、ナビゲーションに限らずその他の要素にも今後積極的に活用していきたいと思います。
厄介なfloatをなるべく使わずにマークアップして、その分レスポンシブに工数を割いていければと思います。

参考にさせていただいたサイト
CSS Flexible Box Layout Module Level 1 http://www.w3.org/TR/css3-flexbox/