flexboxで要素数に関わらず均等幅で横並びにする

flexboxで要素を改行なしで横並びにした際に、要素数に関わらず均等幅にしたいということがあったので、実装方法をメモ。

サンプルコード

以下のように要素数の異なる要素を、横並びに配置してみます。

<ul class="flow">
	<li class="flow_item">STEP1:規約の確認</li>
	<li class="flow_item">STEP2:本人情報の入力</li>
	<li class="flow_item">STEP3:登録完了</li>
</ul>

<ul class="flow">
	<li class="flow_item">STEP1:規約の確認</li>
	<li class="flow_item">STEP2:本人情報の入力</li>
	<li class="flow_item">STEP3:入力内容確認</li>
	<li class="flow_item">STEP4:確認メール送信(URLをクリックして進んでください。)</li>
	<li class="flow_item">STEP5:アカウント情報設定</li>
	<li class="flow_item">STEP6:入力内容確認</li>
	<li class="flow_item">STEP7:登録完了</li>
</ul>

.flowに対してdisplay: flex; と justify-content: space-between; を指定して、均等に配置します。

.flow {
	display: flex;
    justify-content: space-between;
}

均等に配置できましたが、各要素の幅は中身によって異なります。
均等配置で幅が異なる場合のデモページ

要素数が決まっている場合は固定値にするなどして対応できますが、要素数が変動する場合、widthを100％にするといいようです。

.flow {
	display: flex;
}
.flow_item {
	width: 100%;
}

これで各要素を均等幅で横並びに配置することができました。
均等幅に配置するデモページ
　

【参考サイト】

• CSS Flexible Box Layout Moduleで均等幅にレイアウトする – くらげだらけ