CSS - 一行の中でテキストを左寄せと右寄せに分けたい(flexbox)

相談イメージ図

以前、ホームページ運営者から「一行の中でのテキスト配置方法」について、 次のような相談を受けました。

相談者「一行の中に、テキスト部分が2つあります(下図参照)」

通常の横並び

相談者「HTMLは下の通りです。div要素の中に span要素が2つ。 span要素にはそれぞれ.left、.rightというクラス名を付けています」


<div class="frame">
  <span class="left">テキストA</span>
  <span class="right">テキストB</span>
</div>

相談者「この2つを下図のように片方は左寄せ、 もう片方は右寄せで配置したいんですけど・・・」

右寄せ・左寄せを実現

相談者「span要素を『inline-block』要素にして、 『margin-left: auto;』や『margin-right: auto;』を指定しても 左右に分かれてくれないんですよ。どうすればいいですか?」

私「あ、それは『inline-block』あるあるですね」

私「解決方法はいくつかあるのですが、 flexboxの機能を利用するのが一番シンプルかつ簡単ですよ」

今回はこの相談を解決するために、 「一行の中でテキストを左端・右端に配置する方法」を紹介します。

「inline-block」だけだと、「margin: auto」は機能しない

相談者が行ったように、span 要素を「display: inline-block」にして 「margin-left: auto」や「margin-right: auto」を指定しても機能しません。

ではどうすれば機能するのでしょうか?

フレックスボックス機能で左寄せ・右寄せを実現する

フレックスボックスの機能を使うと簡単に左寄せ、右寄せを実現できます。

HTML

<div class="frame">
  <span class="left">テキストA</span>
  <span class="right">テキストB</span>
</div>

CSS

.left, .right {
  display: inline-block;
}

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

span 要素の親要素(div.frame)に対して、 「display: flex;」と「justify-content: space-between;」を指定します。

もしくは次のようにしてもOKです。

CSS 2つめ

.left, .right {
  display: inline-block;
}

.left {
  margin-right: auto;
}

.frame {
  display: flex;
}

親要素に「display: flex;」を指定していれば、 「inline-block」に対して「margin-right: auto;」が機能します。

「display: inline-block;」の部分を「display: block;」と指定しても同じように機能します。

そして、フレックスボックスを使うなら、 最初から span 要素ではなく、div 要素にしていてもいいですよね。

そうすれば、「display: inline-block;」の指定が不要となります。

まとめ

Flexboxを使う以外にも、「float」を使ったり、「display: table-cell」を使ったりして 実現することもできますが、これはFlexboxがない時代に考えられた策です。

現在はFlexboxを使う方法が一番シンプルで簡単なのでおすすめです。