ナビゲーションのメニューボタンの余白を等幅で表示する

CSSの「display:flex;」を使ってレイアウトするナビゲーションについて、全てのボタンの左右余白の幅を同じサイズにする方法を解説します。

この記事のポイント

フレックスアイテムの内側の余白を揃えて表示する
flexプロパティの使い方がわかる

ボタンの余白を揃える

グローバルナビゲーションなどで横並びのボタンを設置する際に、各ボタンの左右にある余白の幅を均等にレイアウトすることがあります。
その時、ボタン内の文字数はそれぞれ異なることの方が多いため、余白は自動的に揃うようになると非常に便利です。

表示幅を変更しても左右の余白サイズが揃うようにします。

まずはナビゲーション部分のHTMLから確認します。
ナビゲーション部分の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>

メニューボタンをul要素とli要素を使ってリストにし、ナビゲーションを表すnav要素で全体を囲みます。

続いて、CSSのコードを確認していきます。
赤字になっている部分は特に重要なプロパティです。

HTMLのマークアップ例

#g_navi ul {
	display: flex;
	margin: 0 auto;
	padding: 0 3%;
	width: 94%;
	max-width: 960px; 
}
	#g_navi ul li {
		flex: 1 0 auto;
	}
		#g_navi ul li a {
			display: block;
	 		padding: 17px 10px;
			color: #fff;
			text-align: center;
			text-decoration: none;
		}

まず、ul要素に「display: flex;」を指定してリスト全体をフレックスボックスにしています。
フレックスボックスにすることで、リスト内のメニューボタンを横に並べるレイアウトにすることができます。

li要素のflexプロパティを使った「flex: 1 0 auto;」は、フレックスボックス内のアイテムの表示方法を指定しています。
3つの値は前から順に拡大比率(flex-growプロパティ)、縮小比率(flex-shrinkプロパティ)、表示方法(flex-basisプロパティ)を指定しており、中でも重要なのは3つ目の表示方法です。
「auto」が指定されているとフレックスボックスに収まるぴったりな幅で表示されます。