CSS「display:flex」で「clearfix」を使わずに要素を並べる。

創業時（2010年頃）にお世話なっていた「clearfix」。
当時は要素を横に並べると言えば定番だったが、今はより簡単な「display:flex」の使い方をメモ。

HTML

<ul>
<li>要素01</li>
<li>要素02</li>
<li>要素03</li>
</ul>

CSS

ul {
	display: -webkit-flex;
	display: flex;
}

上記の初期設定では左揃え、上揃え、要素が増えても改行はなく、幅は内包する要素の幅（テキスト量・画像サイズ）によって変化する。余白はなし。
配置や並びを変更する際は下記プロパティを同セレクターに追加。

プロパティ	説明	値	効果
flex-direction	並び順を指定	row	左から右へ配置
		row-reverse	右から左へ配置
		column	上から下へ配置
		column-reverse	下から上へ配置
flex-wrap	改行を指定	nowrap	改行させずに一列に配置
		wrap	改行して上から下へと配置
		wrap-reverse	改行して下から上へと配置
justify-content	水平方向の配置を指定	flex-start	左揃え
		flex-end	右揃え
		center	左右中央揃え
		space-between	両端の余白を空けずに等間隔で配置
		space-around	全て等間隔で配置
align-items	垂直方向の配置を指定	stretch	デフォルト
		flex-start	上揃え
		flex-end	下揃え
		center	上下中央揃え
		baseline	ベースライン

また、子セレクターに指定することで効果のあるものもある。

プロパティ	説明	値
order	並び順を指定	-1、0、1、2
flex-grow	伸び率を指定	1、2、3
flex-shrink	縮み率を指定	1、2、3
flex-basis	ベースの幅を指定	10％、20％
flex	均等幅	1

参考までに以前の方法（clearfix版）が知りたい方は下記

HTML

<ul class="clearfix">
<li>要素01</li>
<li>要素02</li>
<li>要素03</li>
</ul>

CSS（clearfix版）

.clearfix {
zoom: 100%;
min-hight: 0px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}

• CSSフレックスボックス(display:flex)の使い方
• もう迷わない！CSS Flexboxの使い方を徹底解説