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

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

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031