CSS | display:flexでリストを横並び&折り返す方法

2020-01-172020-10-03CSS フレックスボックス,CSS

display:flexを指定してリストタグの<li>をCSSで横並びにさせる方法と、折り返す方法、簡単なデザインデンプレート集の紹介です。

サンプルでは見やすくする為に、li要素は少しだけ装飾しています。
最後に簡単なリストボタンのデザインサンプルも少し紹介していますので宜しければどうぞです。

横並びなし

See the Pen CSS list tag design (default) by yochans (@yochans) on CodePen.

ul{
	list-style: none;
	padding-left: 0;
	text-align:center;
}

リストタグは通常、リストの左側にリストマークが付いた縦並びの表示形式ですが、CSSを使った様々な方法で横並び表示に切り替える事が可能となっています。

横並びにした場合にリストマークが必要な場合は少ないので、横並びさせる前に非表示に、マーク分に指定されている余白を調節しておきます。

横並びあり

See the Pen CSS list tag design (display:flex) by yochans (@yochans) on CodePen.

displayプロパティのflexは親要素に「display: flex;」を追加するだけで子要素のdisplayプロパティの値に関係なく横並び表示が可能になります。

ul{
	display:flex;
	list-style: none;
	padding-left: 0;
	text-align:center;
}

「display: flex;」での横並び指定はデフォルトでは、子要素の横幅の合計がflexを指定した親要素の横幅に達しても折り返さずひとつひとつの子要素の横幅が詰められて縮小して表示されます。

子要素にwidthを指定した場合も、親要素の横幅に達すると無視され親要素の横幅100％と同一になるように均等に子要素の横幅が縮小されていきます。

テキストの幅以上に小さくなるとテキストが2単語以上ある場合はテキストが自動で折り返されて表示、折り返された後またはテキストが1単語の場合、限界まで縮小されると親要素幅より広がって横スクロールが必要な状態になります。

横並び ＆ 折り返す

See the Pen CSS list tag design (display flex & flex wrap) by yochans (@yochans) on CodePen.

横並び ＆ 折り返すには「flex-wrap: wrap;」を同じく親要素（ul）に追加します。

※子要素では反映されません。

ul{
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
}

「flex-wrap」は折返し設定のプロパティで、デフォルト値では「nowrap（折り返さない）」になっています。
「wrap（折り返す）」を指定する事で「display: flex;」での横並びが折返す状態となります。。

flex-wrapで指定可能な値

flex-wrapで指定可能な値はnowrap（デフォルト）、wrap、wrap-reverseの3種類です。

おまけ：リストボタンのデザインサンプル

display:flexでリストを横並び＆折返しありのシンプルなリンクボタンのテンプレートを紹介しています。

簡単に色を替えれるように、いくつかのカラーバリエーションもcodePen内のCSSソースにありますので宜しければ。

点線枠のあるリストボタン

See the Pen CSS list tag design (dotted line) by yochans (@yochans) on CodePen.

点線（dotted）を使ったリストボタンのサンプルです。
背景色と同色のbox-shadowプロパティを利用して、borderが内側にあるように表現します。

ul{
	list-style: none;
	padding-left: 0;
	display:flex;
	flex-wrap: wrap;
	font-size:14px;
	text-align:center;
}

li{
	width:100px;
	margin: 6px;
}

li a{
	display:block;
	padding: 6px;
	color:#FFF;
	text-decoration:none;
	box-sizing: border-box;
	border: dotted 2px #FFF;
	border-radius: 8px;
	transition: 1s;
	/*色替え用*/
	background:#0D47A1;
	box-shadow: 0px 0px 0px 4px #0D47A1;
}

丸いリストボタン

See the Pen CSS list tag design (circle and dotted line) by yochans (@yochans) on CodePen.

丸ボタンの横並びリストデザインです。

ul{
	list-style: none;
	padding-left: 0;
	display:flex;
	flex-wrap: wrap;
}

li{
	margin: 8px;
}

li a{
	display:flex;
  justify-content: center;
  align-items: center;
	width:100px;
	height:100px;
	font-size:14px;
	color:#FFF;
	font-weight: bold;
	text-decoration:none;
	box-sizing: border-box;
	border: dotted 3px #FFF;
	border-radius: 50%;
	transition: 1s;
	/*色替え部分*/
	background:#0D47A1;
	box-shadow: 0px 0px 0px 4px #0D47A1;
}

li a:hover {
	/*色替え部分*/
	background: #1E88E5;
	box-shadow: 0px 0px 0px 4px #1E88E5;
}

付箋タイプのリストボタンデザイン

See the Pen CSS list tag design (dotted line) by yochans (@yochans) on CodePen.

付箋タイプのリストボタンデザインです。
マウスホバーで少し明るくなります。

ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

li {
	margin: 4px;
}

li a {
	display: block;
	width: 120px;
	padding: 10px 0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	transition: 1s;
	background: #F5F5F5;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
	/*色替え部分*/
	color: #E0E0E0;
	border-left: 5px solid #0D47A1;
}

li a:hover {
	/*色替え部分*/
	color: #1E88E5;
	border-left: 5px solid #1E88E5;
}