「display:flex;」によるフレックスボックスでナビゲーションを等幅に並べる

フレックスボックスを使ってメニューボタンを横に並べる

displayプロパティに「flex」を使って、メニューボタンを全て等しい幅で横に並べていきます。

まずはナビゲーションのHTMLから確認していきます。

HTMLのマークアップ例

<nav id="g_navi">
	<ul>
		<li><a href="/">ホーム</a></li>
		<li><a href="/concept">コンセプト</a></li>
		<li><a href="/menu">メニュー</a></li>
		<li><a href="/access">アクセス</a></li>
		<li><a href="/contact">お問い合わせ</a></li>
	</ul>
</nav>

リストを使ってメニューボタンを並べ、ナビゲーションを表すnav要素で囲っています。
続いて、CSSのコードを確認します。

CSSのコード例

#g_navi ul {
	display: flex;
	margin: 0 auto;
	padding: 0 3%;
	width: 94%;
	max-width: 960px; 
}
	#g_navi ul li {
		width: calc(100%/5);
	}
		#g_navi ul li a {
	 		display: block;
			padding: 17px 5%;
			width: 90%;
			color: #fff;
			text-align: center;
			text-decoration: none;
		}

今回のCSSの肝になるポイントは2つです。

• ul要素に「display: flex;」を指定
• li要素を親要素の幅いっぱいに並べる

1つ目のポイントはul要素に「display: flex;」を指定し、リスト全体をフレックスボックスに設定します。
フレックスボックスの子孫要素は幅を設定することで要素を横方向に綺麗に並べることができます。

2つ目のポイントは子孫要素であるli要素の幅を適切に設定することです。
今回は全てのメニューボタンを同じ幅で並べることを目的としているため、calc関数を使って単純にボタン数(5)で割った値を横幅に設定しています。

具体的には、5つのメニューボタンなので「100% / 5」の計算を行い、各メニューボタンに「20%」の横幅を指定していることになります。

もしメニューボタンの数が6つであれば「100% / 6」、8つであれば「100% / 8」のように、メニューボタンの数に応じて数字を置き換えるだけで幅を自動的に設定することができて便利です。

メニューボタンを横に並べる方法は、今回ご紹介した方法の他にfloatプロパティを使った方法と「display: inline-block;」を使った方法があります。
この2つの方法について、詳しくは「横並びのメニューを作成する」をご覧ください。