これからのCSSレイアウトはFlexboxで決まり！

Flexboxとは

Flexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めるボックスレイアウトモジュールです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。

対応ブラウザー

現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が少し変わってくるようで、今回は省略します。

ちなみに2015年1月の、日本のブラウザーシェアでは1位がIE11で29.64%を占めています。Flexboxに対応していないIE9は3.91%。これからも増えることはないと思うので、サイトによっては切り捨ててもいいかもしれません。

Flexboxの素敵なところ

今までは様々なプロパティーを組み合わせたり、JavaScriptに頼っていたような配置方法も、Flexboxなら簡単に実装できます。例えば…

CSSを一行プラスするだけで横並びにできる！

横並びになった要素の高さが最初から揃ってる！

要素を上下左右、好きな順序に並び替えられる！

スペースの操作も自由自在！

高さの異なる横並びの要素を、簡単に上下中央揃え！

実際にどうなるのか見てみよう

利点をあげても、実際に見てみないとすごさはわからないと思うので、さっそく作っていきましょう。まずは元となるナビゲーションメニューを作成します。

HTML

<nav>
<ul class=”main-nav”>
<li><a href=”#” class=”logo”>Logo</a></li>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3</a></li>
<li><a href=”#”>Menu 4</a></li>
</ul>
</nav>

CSS

.main-nav a {
margin: 10px;
border-radius: 5px;
background: #60B99A;
color: #fff;
display: block;
padding: 15px;
text-decoration: none;
}
.main-nav .logo {
background: #4584b1;
}