Flexbox: 軸、justify/align、gap、flex-grow

Flexboxの2つの軸をマスターして、日常的なレイアウトで要素を揃え、中央に配置し、分配しましょう。

9 分 · 3 問

ナビゲーションバー、カードの並び、揃えられたフォーム。Flexboxは一次元レイアウトのための日常的な道具です。すべては2つの軸に基づいています。主軸(flex-direction で設定、デフォルトでは水平)と、それに垂直な交差軸です。justify-content は主軸に沿って要素を分配し、align-items は交差軸上で要素を揃えます。このペアを覚えておきましょう。大半のケースが解決します。定番のナビゲーションバーを例にとってみましょう。

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

いくつかの宣言で、このリストがプロ仕様のバーに変わります。space-between はロゴを左へ、ボタンを右へ押しやり、align-items: center は高さの異なる要素を垂直方向に揃え、gap はマージンを管理することなくリンクどうしの間隔を空けます。

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

頭の体操: .navbar を flex-direction: column に切り替えると、justify-content: space-between は何をするでしょうか? 主軸が回転したので、今度は要素を垂直方向に分配します。これがFlexboxの定番の落とし穴です。justify-content と align-items は「水平」「垂直」を意味するのではなく、「主軸」「交差軸」を意味します。もうひとつの必修ケース、コンテンツを完璧に中央揃えする方法です。

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow は残った空きスペースを要素どうしに分配します。具体例として、固定サイドバーと、それ以外をすべて埋めるコンテンツからなるレイアウトです。flex: 0 0 240px はサイドバーを固定し(伸びも縮みもしません)、flex-grow: 1 はコンテンツに使える空間をすべて吸収させます。

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. flex-direction: column のとき、justify-content は何を制御しますか?
   • 要素の水平方向の揃え
   • 垂直方向の揃え。主軸が垂直になったから
   • テキストの行間
2. flexコンテナ内で要素を水平・垂直の両方向に中央揃えする組み合わせはどれですか?
   • text-align: center と vertical-align: middle
   • justify-content: center と align-items: center
   • コンテナへの margin: 0 auto
3. flexコンテナ内で .a に flex-grow: 2、.b に flex-grow: 1 があります。何が起こりますか?
   • .a は常に .b のちょうど2倍の幅になる
   • .a は残った空きスペースを .b の2倍受け取る
   • .b が隠され .a が優先される