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を使う方法が一番シンプルで簡単なのでおすすめです。