テキストをCSSで両端揃えにする方法

今回はCSSのみでテキストを両端揃えにする方法です。
正直こんなク○コード書きたくないけど、どうしてもやってくれって時あるでしょう?

 

テキストを両端揃えにする

まずはベースのHTMLを用意します。

 

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

 

続いてCSS。

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

 

flexbox便利すぎるよね!
flexboxのプロパティで端から端まで自動で広げて横並びにしてくれる設定にするだけ!
どうしてもこの見出しは両端まで均等に配置したデザインにして欲しいとか結構無茶な要求をされた際に使えますね!

 

1回だけ使ったことあります・・・。

コメント

タイトルとURLをコピーしました