並べる — Flexboxの考え方

箱をどう並べるか、という問題

前回、すべての要素は箱だと学びました。次の課題は「その箱たちをどう並べるか」です。何もしないと、多くの箱は上から下へ縦にひとつずつ積まれます。でも実際のサイトでは、メニューが横一列に並んだり、カードが横に3つ並んだりします。これを担当するのがFlexboxです。

まず親に「棚になれ」と伝える

Flexboxは、並べたい箱そのものではなく、それらを囲む親の箱に対して指示します。親に display: flex を書いた瞬間、その親は「棚」になり、中の子要素たちが横一列に並びます。

<nav class="menu">
  <a href="/">ホーム</a>
  <a href="/about">会社概要</a>
  <a href="/contact">お問い合わせ</a>
</nav>

.menu {
  display: flex;
  gap: 16px;
}

display: flex が「この親を棚にする」という合図です。gap は棚に並んだ物どうしの間隔。この2行を見つけたら、「あ、中身を横に並べているんだな」と読めます。

並び方をそろえる二つの向き

棚には「並ぶ方向」と「それに直交する方向」があります。よく出てくる二つのプロパティを、意味とセットで覚えましょう。

• justify-content … 並んでいる方向のそろえ方。横並びなら「左寄せ/中央/右寄せ/均等」など
• align-items … 並びと直交する方向のそろえ方。横並びなら「上寄せ/中央/下寄せ」など

.menu {
  /* display: flex がない */
}

.menu {
  display: flex;
  justify-content: center;
  gap: 16px;
}