display:flexでli(リスト)を横並び、折り返す方法

2020-01-18CSS,CSS フレックスボックス

css

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

デフォルトのリストタグ表示

<ul>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
</ul>

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

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

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

ul{
	list-style: none;
	padding-left: 6px;
}

displayプロパティのflexで横並びさせる方法

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

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

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

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

li{
	width:120px;
	padding: 6px;
	margin: 1px;
}

displayプロパティのflexでの横並びを折り返す方法

デフォルトの挙動

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

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

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

原因はflex-wrapという折返し設定のプロパティがデフォルトではnowrap(折り返さない)になっている為で、この指定をwrap(折り返す)に切り替える事で「display: flex;」での折返しが指定になります。

「flex-wrapプロパティでwrapを指定する

flex-wrapプロパティは「display: flex;」と同じく親要素に指定します。
※子要素では反映されません。

ul{
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
}
flex-wrapでwrapを指定して折返しにする
flex-wrapでwrapを指定して折返しにする

flex-wrapで指定可能な値

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

nowrap(デフォルト)折り返さない
wrap折り返す
wrap-reverse逆順で折り返す

display:flexでリストを横並びさせたシンプルなテンプレート

display:flexでリストを横並びさせたシンプルなテンプレートを紹介しています。

簡単に色を替えれるように、いくつかのカラーバリエーションを作ってみました。

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

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

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

CSS

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;
}

カラーバリエーション

/*BLUE*/

.blue {
	background: #0D47A1;
	box-shadow: 0px 0px 0px 4px #0D47A1;
}

.blue:hover {
	background: #1E88E5;
	box-shadow: 0px 0px 0px 4px #1E88E5;
}


/*GREEN*/

.green {
	background: #004D40;
	box-shadow: 0px 0px 0px 4px #004D40;
}

.green:hover {
	background: #43A047;
	box-shadow: 0px 0px 0px 4px #43A047;
}


/*ORENGE*/

.orenge {
	background: #BF360C;
	box-shadow: 0px 0px 0px 4px #BF360C;
}

.orenge:hover {
	background: #FF7043;
	box-shadow: 0px 0px 0px 4px #FF7043;
}


/*RED*/

.red {
	background: #B71C1C;
	box-shadow: 0px 0px 0px 4px #B71C1C;
}

.red:hover {
	background: #EF5350;
	box-shadow: 0px 0px 0px 4px #EF5350;
}


/*PINK*/

.pink {
	background: #FF5252;
	box-shadow: 0px 0px 0px 4px #FF5252;
}

.pink:hover {
	background: #FF8A80;
	box-shadow: 0px 0px 0px 4px #FF8A80;
}


/*BROWN*/

.brown {
	background: #3E2723;
	box-shadow: 0px 0px 0px 4px #3E2723;
}

.brown:hover {
	background: #8D6E63;
	box-shadow: 0px 0px 0px 4px #8D6E63;
}


/*GLAY*/

.glay {
	background: #424242;
	box-shadow: 0px 0px 0px 4px #424242;
}

.glay:hover {
	background: #757575;
	box-shadow: 0px 0px 0px 4px #757575;
}


/*BLACK*/

.black {
	background: #000;
	box-shadow: 0px 0px 0px 4px #000;
}

.black:hover {
	background: #424242;
	box-shadow: 0px 0px 0px 4px #424242;
}

丸いリストボタン

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;
}

カラーバリエーション

/*BLUE*/

.blue {
	background: #0D47A1;
	box-shadow: 0px 0px 0px 4px #0D47A1;
}

.blue:hover {
	background: #1E88E5;
	box-shadow: 0px 0px 0px 4px #1E88E5;
}


/*GREEN*/

.green {
	background: #004D40;
	box-shadow: 0px 0px 0px 4px #004D40;
}

.green:hover {
	background: #43A047;
	box-shadow: 0px 0px 0px 4px #43A047;
}


/*ORENGE*/

.orenge {
	background: #BF360C;
	box-shadow: 0px 0px 0px 4px #BF360C;
}

.orenge:hover {
	background: #FF7043;
	box-shadow: 0px 0px 0px 4px #FF7043;
}


/*RED*/

.red {
	background: #B71C1C;
	box-shadow: 0px 0px 0px 4px #B71C1C;
}

.red:hover {
	background: #EF5350;
	box-shadow: 0px 0px 0px 4px #EF5350;
}


/*PINK*/

.pink {
	background: #FF5252;
	box-shadow: 0px 0px 0px 4px #FF5252;
}

.pink:hover {
	background: #FF8A80;
	box-shadow: 0px 0px 0px 4px #FF8A80;
}


/*BROWN*/

.brown {
	background: #3E2723;
	box-shadow: 0px 0px 0px 4px #3E2723;
}

.brown:hover {
	background: #8D6E63;
	box-shadow: 0px 0px 0px 4px #8D6E63;
}


/*GLAY*/

.glay {
	background: #424242;
	box-shadow: 0px 0px 0px 4px #424242;
}

.glay:hover {
	background: #757575;
	box-shadow: 0px 0px 0px 4px #757575;
}


/*BLACK*/

.black {
	background: #000;
	box-shadow: 0px 0px 0px 4px #000;
}

.black:hover {
	background: #424242;
	box-shadow: 0px 0px 0px 4px #424242;
}

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

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

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

CSS

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;
}

カラーバリエーション

/*BLUE*/

.blue {
	color: #0D47A1;
	border-left: 5px solid #0D47A1;
}

.blue:hover {
	color: #1E88E5;
	border-left: 5px solid #1E88E5;
}


/*GREEN*/

.green {
	color: #004D40;
	border-left: 5px solid #004D40;
}

.green:hover {
	color: #43A047;
	border-left: 5px solid #43A047;
}


/*ORENGE*/

.orenge {
	color: #BF360C;
	border-left: 5px solid #BF360C;
}

.orenge:hover {
	color: #FF7043;
	border-left: 5px solid #FF7043;
}


/*RED*/

.red {
	color: #B71C1C;
	border-left: 5px solid #B71C1C;
}

.red:hover {
	color: #EF5350;
	border-left: 5px solid #EF5350;
}


/*PINK*/

.pink {
	color: #FF5252;
	border-left: 5px solid #FF5252;
}

.pink:hover {
	color: #FF8A80;
	border-left: 5px solid #FF8A80;
}


/*BROWN*/

.brown {
	color: #3E2723;
	border-left: 5px solid #3E2723;
}

.brown:hover {
	color: #8D6E63;
	border-left: 5px solid #8D6E63;
}


/*GLAY*/

.glay {
	color: #424242;
	border-left: 5px solid #424242;
}

.glay:hover {
	color: #757575;
	border-left: 5px solid #757575;
}


/*BLACK*/

.black {
	color: #000;
	border-left: 5px solid #000;
}

.black:hover {
	color: #424242;
	border-left: 5px solid #424242;
}

2020-01-18CSS,CSS フレックスボックス

Posted by Yousuke.U