レスポンシブサイトで両端揃え・均等割りをするときはflexを使うといいよ

タイトルままです

ググっても検索しても出てこなかったのでメモ代わりに書いてみます、もし他の方とネタがかぶってたら削除するのでご了承下さい

レスポンシブサイト以前、ひと昔前のサイト作成時、両端揃えをする場合はletter-spacingを使い

html

<dl>
	<dt><span class="a">リン</span>ゴ</dt>
	<dd>赤いフルーツ</dd>
	<dt><span class="b">オレン</span>ジ</dt>
	<dd>橙色のフルーツ</dd>
</dl>

scss

dl {
	dt{
		span.a {
			letter-spacing: 20px;
		}
		span.b {
			letter-spacing: 10px;
		}
	}
}

というようにブロック内の文字数に応じて位置を何pxと調節して両端揃えを実現していました。

ですがレスポンシブサイトサイトが全盛の今、親要素の横幅は常に不定であってないようなもの、letter-spacingがピクセル単位で固定されてしまっている以上うまく両端揃えになってくれません

letter-spacingが「%」に対応してくれればいいのですが仕様でできないようです、ではどうするか

flexを使って対応する

html

<dl>
	<dt>
		<span>リ</span>
		<span>ン</span>
		<span>ゴ</span>
	</dt>
	<dd>赤いフルーツ</dd>
	<dt>
		<span>オ</span>
		<span>レ</span>
		<span>ン</span>
		<span>ジ</span>
	</dt>
	<dd>橙色のフルーツ</dd>
</dl>

scss

dl {
	dt{
		display: flex;
		justify-content: space-between;	
	}
}

spanで1文字づつ囲い、無理やり子要素を作り出し親にflexをかけjustify-contentプロパティを指定すれば均等割りができます

justify-contentはflexコンテナ内でアイテムが自動で均等の間隔を作り出してくれるプロパティで、レスポンシブ以前のように1つづつサイズを計算して指定する必要がなくなります

こうすれば親の横幅がいくらになっても自動で均等に表示してくれます

問題点

a要素のリンク内でこれをすると下線の表示が残念なことになります