CSS | display:flexを使ったレスポンシブなフッターナビ

CSS フレックスボックス,CSS

CSS | display:flexを使ったレスポンシブなフッターナビ

CSSのflexbox(display:flex)を使ったレスポンシブなフッターナビのデザインサンプルコードです。

レスポンシブなフッターナビ 2カラム

2カラム構造のレスポンシブなフッターナビのサンプルです。

See the Pen CSS flexbox footer nav (2 column) by yochans (@yochans) on CodePen.

<footer>
	<nav>
		<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
		<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
	</nav>
	<p id="copyright">Copyright 2021</p>
</footer>
footer nav{
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap: 0 4px; /* 余白(縦 横) */
}

footer nav div {
	flex-grow: 1; /* レスポンシブ化 */
	background: #ffe4e1;
}

footer nav p{
	margin: 2px;
	padding: 2px 6px;
}

#copyright {
	display: flex; /* flexbox */
	justify-content: center; /* 中央揃え */
	align-items: center; /* 中央揃え */
	margin-top: 4px;
	padding: 10px;
	background: #ffe4e1;
}

背景色は確認用に設定しているだけですので、不要になれば削除して下さい。
その場合、#copyrightのmargin-topも不要になりそうです。

flex-grow: 1を指定することで、レスポンシブにしています。

footer nav pでサイトメニューなどを表示するリストの余白などを調節しています。

copyrightもflexbox(display:flex)を使ってコピーライトのテキスト部分が縦横中央にくるようにしています。

スマホ他、モバイル端末での表示時にカラム数を1カラムに変更する場合はfooter nav divにmin widthを指定します。
指定した値よりディスプレイサイズが小さい端末では1カラムの状態になります。

footer nav div {
	flex-grow: 1; /* レスポンシブ化 */
	min-width: 600px; /* モバイル端末サイズ */
	background: #ffe4e1;
}

レスポンシブなフッターナビ 3カラム

3カラム構造のレスポンシブなフッターナビのサンプルです。
2カラムとの違いは単純にHTMLで要素のブロックを増やしているだけです。

See the Pen CSS flexbox footer nav by yochans (@yochans) on CodePen.

<footer>
	<nav>
		<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
		<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
		<div><p>MENU</p><p>MENU</p><p>MENU</p><p>MENU</p></div>
	</nav>
	<p id="copyright">Copyright 2021</p>
</footer>
footer nav{
	display: flex; /* flexbox */
	flex-wrap: wrap; /* 折返し指定 */
	gap: 0 4px; /* 余白(縦 横) */
}

footer nav div {
	flex-grow: 1; /* レスポンシブ化 */
	background: #ffe4e1;
}

footer nav p{
	margin: 2px;
	padding: 2px 6px;
}

#copyright {
	display: flex; /* flexbox */
	justify-content: center; /* 中央揃え */
	align-items: center; /* 中央揃え */
	margin-top: 4px;
	padding: 10px;
	background: #ffe4e1;
}

サンプルのようなコードであれば、3カラム、あるいは4カラムなどに増減する場合は必要なHTMLを追加しているだけで実装可能です。

背景色は確認用に設定しているだけですので、不要になれば削除して下さい。
その場合、#copyrightのmargin-topも不要になりそうです。

スマホ他、モバイル端末での表示時にカラム数を1カラムに変更する場合はfooter nav divにmin widthを指定します。
指定した値よりディスプレイサイズが小さい端末では1カラムの状態になります。

footer nav div {
	flex-grow: 1; /* レスポンシブ化 */
	min-width: 600px; /* モバイル端末サイズ */
	background: #ffe4e1;
}