フレックスボックスレイアウトでよこ並び

ナビゲーションをよこ並び

ul要素にdisplayプロパティでflexを指定します。
フレックスボックスレイアウトでは、flexを指定した要素自体がよこ並びになるわけではなくて、flexを指定した要素の直接の子要素が並ぶ対象となります。
ただ、テーブルレイアウトでは、子要素にもtable-cellと明示的に指定する必要がありましたが、フレックスボックスレイアウトでは、特別にスタイルを指定しなくても、親要素にdisplay: flexと指定するだけで、子要素が勝手によこ並びになるので、ちょっと不思議な感じですよね。

.nav_list {
	display: flex;
}

さぁ、これでli要素はすべて、フレキシブルな要素になりました:D！
現状、フレックスボックスレイアウト関連プロパティの初期値によって、すべてよこ並びでレイアウトされた状態です。

フレックスボックスの基本概念

displayプロパティでflexと指定した要素は「フレックスコンテナー」、その直接の子要素は「フレックスアイテム」という状態になります。
要素が並ぶ方向の軸を「主軸」、それに垂直に交わる軸を「交差軸」と呼びます。

フレックスボックスレイアウト関連プロパティには、コンテナーに指定するプロパティ、アイテムに指定するプロパティや、主軸に効くプロパティ、交差軸に効くプロパティが個々にあるので、この基本概念はとても大事です¦‹。

直接の子要素というのもポイントで、孫要素はフレキシブルにはならないので注意です。

フレックスボックスについて、詳しくは下記ページを参照のこと。
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN

中央に配置する

要素を中央に配置するには、justify-contentプロパティを使います。justify-contentプロパティはコンテナーに指定するプロパティで、アイテムの主軸方向の配置の仕方を決めるためのプロパティです。ここではcenterという値を指定しています。

.nav_list {
	display: flex;
	justify-content: center;
	gap: 1px;
}

ボタンのサイズを揃える

アイテムの横幅を制限するには、アイテムに対してflex-basisプロパティを使います。下のサンプルでは、12emに指定しています。
文字数によってリンクボタンの大きさが揃わないのは、フレックスボックスレイアウトでも同じですね…。

.nav_list li {
	flex-basis: 12em;
}

よく見ると、li要素の高さは揃っているので、a要素の高さを100%と指定してやればリンクボタンの高さも揃いそうです。a要素にはパディングが付いているので、box-sizingプロパティでborder-boxを指定するのも忘れずに:‹。

.nav_list a {
	height: 100%;
	box-sizing: border-box;
}

リンクボタンの高さが揃いましたね！あとは中のテキストも中央に配置したいところなのですが、ここでまたフレックスボックスです、a要素もフレックスボックスにしちゃいます:)。
a要素がフレックスコンテナーになると、その中のテキストがフレックスアイテムになります。

フレックスアイテムを中央に配置するには、justify-contentプロパティとalign-itemsプロパティを使います。どちらもコンテナーに対して指定するプロパティで、ここではどっち共にcenterを指定します。

.nav_list a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
}

横幅いっぱいに広げる

横幅いっぱいに広げるには、アイテムに対して、flex-growプロパティで1以上の数値を指定します。
ここで指定した数値は、コンテナー内の余った領域を、各アイテムにどう分配するかの割合を表します。ここではアイテム全てに対して1を指定しているので、アイテムそれぞれに同じ分ずつ余白が分配されることになります。

.nav_list li {
	flex-grow: 1;
}

上サンプルの下段はテーブルレイアウトでよこ並びしたもの。きちんと分配している分、フレックスボックスレイアウトの方がアイテムのバランスがよいのがわかりますね:o。

レスポンシブにする

スマホではたて並びになるようにしましょう。他の記事の時みたく、ビューポート幅が狭い時だけフレックスボックスレイアウトにするという指定でもよいのですけれど、せっかくフレキシブルなので、この切り替えもフレキシブルに行うことにします:D！
前述のflex-directionプロパティを使って並びの向きを変えます。メディアクエリで、767px以下の時のみ、ul要素にflex-direction: columnと指定します。

@media screen and (max-width: 767px) {
	.nav_list {
		flex-direction: column;
	}
}

レスポンシブにする

他の記事と同じく、メディアクエリを使って、767px以下の時は2列、428px以下の時には1列になるように調整します。
下サンプルでは、ビューポート幅ごとにflex-basisプロパティの値を50%、autoと切り替えています。

@media screen and (max-width: 767px) {
	.menu_list li {
		flex-basis: 50%;
	}
}
@media screen and (max-width: 428px) {
	.menu_list li {
		flex-basis: auto;
	}
}

より意図にあったカタチで、効率よく指定するならば以下のようになります。
他の記事の時みたく「429px以上の時だけにフレックスボックスレイアウトを適用する」というやり方じゃなくて、常にフレックスボックスレイアウトのまま、縦一列になる時だけflex-directionでたて並びとなるようにしました:)。フレックスボックスレイアウトの「アイテム並び替え」という機能を享受したいのでね;D。

@media screen and (max-width: 428px) {
	.menu_list li {
		flex-direction: column;
	}
}
@media screen and (min-width: 429px) {
	.menu_list li {
		flex-basis: 50%;
	}
}
@media screen and (min-width: 768px) {
	.menu_list li {
		flex-basis: 33.333%;
	}
}