CSSだけでテキストを均等に両端揃えで配置する方法

CSS

2020.06.09

この記事は約2分で読めます。

テキストでを端から端まで均等に配置してくれって言われたときの対処方法を紹介します。
今回はspanを多用するので、決してコードがきれいとは言えません。
spanで線を作ってハンバーガーメニューを作るとかが好きじゃないのでこのやり方自体もあんまり好きじゃない（

ただデザイン上仕方なくやらないといけないこともあるので、覚えておくといずれ役に立つかもしれません。
ではいってみよう！

まずはHTMLを用意しましょう。
今回「CSSだけでテキストを均等に両端揃えで配置する」のは、「span」の部分です。

<div class="full_text">
  <span>さ</span>
  <span>ん</span>
  <span>ぷ</span>
  <span>る</span>
</div>

続いてCSSを書いていきます。
今回はflexboxでspanを両端に配置し、間を均等にしてくれる「justify-content: space-between」を設定します。

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

コレで完成！
floatでは、なかなか難しいですが、flexboxならこういう配置も簡単ですね。