【CSS】Flexboxでレイアウト

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

ここが便利！Flexbox

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

実装方法

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

HTML

<nav>
	<ul>
		<li><a href="#">HOME<span>ホーム</span></a></li>
		<li><a href="#">SERVICE<span>サービス</span></a></li>
		<li><a href="#">ABOUT US<span>企業概要</span></a></li>
		<li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li>
		<li><a href="#">CONTACT US<span>お問い合わせ</span></a></li>
	</ul>
</nav>

CSS

nav {
	margin-top: 50px;
}

ul {
	width: 900px;
	margin: 0 auto;
	text-align: center;
	display: flex;/* これを指定するだけで横並びに！ */
	display: -webkit-flex;/* chrome、Safari用 */
}

ul li {
	font-size: 14px;
}

ul li a {
	display: block;
	padding: 1em;
}


/* ここからは主にナビゲーションの装飾 */
ul li a {
	color: #FFFFFF;
	text-decoration: none;
}

ul li a:hover {
	background: #CCCCCC;
	color: #000000;
	text-decoration: underline;
}

ul li a span {
	display: block;
	font-size: 11px;
}

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}

アレンジ

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

HTML

<nav>
	<ul>
		<li><a href="#">HOME<span>ホーム</span></a></li>
		<li><a href="#">SERVICE<span>サービス</span></a></li>
		<li><a href="#">ABOUT US<span>企業概要</span></a></li>
		<li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li>
		<li><a href="#">CONTACT US<span>お問い合わせ</span></a></li>
	</ul>
</nav>

CSS

nav {
	margin-top: 50px;
}

ul {
	margin: 0 auto;
	width: 90%;/* 横幅を%で指定 */
	text-align: center;
	display: flex;
	display: -webkit-flex;
}

ul li {
	font-size: 14px;
	flex: 2;/* 横幅の比率を指定 */
	-webkit-flex: 2;/* chrome、Safari用 */

}

ul li:first-child {
	flex: 1;/* HOMEの横幅は半分 */
	-webkit-flex: 1;/* chrome、Safari用 */
}

ul li a {
	display: block;
	padding: 1em;
}


/* ここからは主にナビゲーションの装飾 */
ul li a {
	color: #FFFFFF;
	text-decoration: none;
}

ul li a:hover {
	background: #CCCCCC;
	color: #000000;
	text-decoration: underline;
}

ul li a span {
	display: block;
	font-size: 11px;
}

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}

最後に

以前、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/