CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック

サイト構築 -CSS

Post on:2023年2月2日

はじめに

これは一見すると些細なことですが、ようやく最終的な解決策にたどりついたので、記事に書こうと思います。

CSS Flexboxで各アイテムをフラットな階層に整列した場合、margin: auto;を使用すると、アイテムの両端揃えの効果を得ることができます。

display :flex;で、各アイテムを整列
flex-grow: 2;で、フリースペースがある場合にアイテムを伸長
margin: auto;で、両端揃え

参考: flex-growとは -CSS Flexbox 各プロパティの使い方を詳しく解説
参考: CSSのプロパティの値に「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど

CSS Flexboxで左と右の両端揃えにしたい

では、詳しく解説します。
アイテムがあり、CSS Flexboxを使用してそのアイテムをレイアウトすることがあります。たとえば、ナビゲーションのリンクです。

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/archive">Archive</a>
</nav>
<style>
  nav { display: flex; }
</style>

<nav>

<a href="/about">About</a>

<a href="/archive">Archive</a>

</nav>

<style>

nav { display: flex; }

</style>

親要素にdisplay: flex;を与えるだけで、横軸に配置されます。

display :flex;で、各アイテムを整列

しかし、たとえば、左にプライマリアイテム、右にセカンダリアイテムを配置する（比較的標準的な）レイアウトが必要だとします。下記のような感じです。

左にプライマリアイテム、右にセカンダリアイテムを配置

実現する方法はいくつかありますが、他の方法より優れている方法があります。

解決方法1: マークアップを追加する

左に配置するアイテムを<div>で囲み、右も同様に<div>で囲み、justify-content: space-between;でその間のスペースを揃えます。

<nav>
  <div>
    <a href="/">Home</a>
  </div>
  <div>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
  </div>
</nav>
<style>
  nav {
    display: flex;
    justify-content: space-between;
  }
</style>

<nav>

<div>

</div>

<div>

<a href="/about">About</a>

<a href="/archive">Archive</a>

</div>

</nav>

<style>

nav {

display: flex;

justify-content: space-between;

}

</style>

これで目的は達成できますが、マークアップをスタイル目的のために追加していることになるので、よろしくありません。

解決方法2: flex-growを使用する

flex-growを使用して左に配置するアイテムを伸長させ、残りのスペースを占有するように設定できます。

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/archive">Archive</a>
</nav>
<style>
  nav { display: flex }
  nav > :first-child { flex-grow: 2 }
</style>

<nav>

<a href="/about">About</a>

<a href="/archive">Archive</a>

</nav>

<style>

nav { display: flex }

nav > :first-child { flex-grow: 2 }

</style>

flex-growで必要なものが得られますが、左のアイテムは残りのスペースいっぱいになってしまいます。

左のアイテムは残りのスペースいっぱいになる

見た目の観点からは問題ないように見えるかもしれませんが、このスペースを占有する効果は適切ではありません。

インタラクションの観点からすると、左のリンクは残りのスペースいっぱいに広がり、テキストだけでなくスペース全体にカーソルを合わせるとクリック可能になります。その結果、何も無い箇所がインタラクティブになるという奇妙な動作が発生します。

何もない箇所もクリック可能になる

解決方法3: margin: auto;を使用する

では、CSSだけを使用して、多数のアイテムからなるフラットな階層の個々のアイテム間のスペースを正当化するには、どうすればよいでしょうか？

StackOverflowでその答えを見つけ、flexboxでmarginを有効活用できることを改めて実感しました。

この問題を解決するには、margin: auto;を使用すると、左のリンクが残りのスペースを埋めることなく、左のアイテムと次のアイテム間のスペースを埋めることができます。

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/archive">Archive</a>
</nav>
<style>
  nav { display: flex }
  nav > :first-child { margin-right: auto }
</style>