【CSS入門】Flexboxで要素を横並びにする方法！display: flexの基本

Web制作の学習において、多くの初心者が最初にぶつかる大きな壁が「要素を横に並べること」です。

「メニューボタンを横一列に並べたいのに、なぜか縦に積み重なってしまう……」
「横には並んだけど、上下中央に揃える方法がわからない」

かつては非常に難解だったこの「横並び」を、一瞬で解決するために生まれた魔法のプロパティがFlexbox（フレックスボックス）です。この記事では、現在のWebデザインで必須の技術であるFlexboxの基本を、図解とともに分かりやすく解説します。

なぜ「横並び」は難しいのか？
すべてはここから！display:flexの基本
justify-content：横方向の揃え方を決める
align-items：縦方向（高さ）の揃え方を決める
【実践サンプル】よくある「ナビゲーションメニュー」を作ろう
まとめ：Flexboxを使いこなす3ステップ

なぜ「横並び」は難しいのか？

HTMLのタグ（<div>や<li>など）は、基本的に「ブロック要素」と呼ばれ、放っておくと上から下へ、縦に積み重なる性質を持っています。

これを横に並べるために、昔のエンジニアは複雑な計算や古い手法（float）を駆使して苦労してきました。しかし、現代にはdisplay: flex;があります。これを使うだけで、積み木を横に並べるように直感的なレイアウトが可能になります。

すべてはここから！display:flexの基本

Flexboxを使うためのルールはたった1つ。「並べたい要素の『親』にdisplay: flex;を書く」こと。これだけです。

親要素（コンテナ）と子要素（アイテム）

Flexboxを理解するコツは、要素を「親」と「子」の関係で捉えることです。

親要素（Flex Container）：箱をまとめる大きな枠組み。ここにdisplay: flex;を指定します。
子要素（Flex Item）：横に並べたい個々のパーツ。

HTML

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.flex-container {
  display: flex; /* これだけで子が横に並ぶ！ */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #00bcd4;
  margin: 10px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

実行結果

この1行を書いた瞬間、縦に並んでいた3つのアイテムが、左から右へピタッと横に整列します。

justify-content：横方向の揃え方を決める

要素が横に並んだら、次は「どこに配置するか」を決めましょう。親要素にjustify-contentを追加することで、横方向（主軸）の配置を自由自在に操れます。

よく使う設定は以下の5つです。

値	動き
flex-start	左寄せ（デフォルト）
flex-end	右寄せ
center	中央寄せ
space-between	両端に寄せて、間を均等に空ける
space-around	各アイテムの左右に均等な余白を作る

特にspace-betweenは、Webサイトのヘッダー（左にロゴ、右にナビメニュー）を作る際によく使われる「鉄板」の設定です。

align-items：縦方向（高さ）の揃え方を決める

横並びにしたとき、要素同士の「高さ」がバラバラで困ったことはありませんか？そんな時はalign-itemsを使います。これは縦方向（交差軸）の配置を決めるプロパティです。

こちらも親要素に指定します。

center：上下中央に揃える（最もよく使います）
flex-start：上に揃える
flex-end：下に揃える
stretch：親の高さに合わせて要素を伸ばす（デフォルト）

HTML

<div class="align-example-container">
  <div class="flex-parent">
    <div class="item short">短い</div>
    <div class="item tall">背が高い要素<br>（2行分）</div>
    <div class="item">標準</div>
  </div>
</div>

CSS

/* 親要素：ここに align-items を指定する */
.flex-parent {
  display: flex;
  background-color: #f0f0f0;
  height: 150px;           /* 違いを分かりやすくするために高さを設定 */
  padding: 10px;
  border: 2px dashed #ccc;
  
  /* ↓ ここを書き換えて比較します ↓ */
  align-items: center;     /* 上下中央揃え */
  /* align-items: flex-start;  上揃え */
  /* align-items: flex-end;    下揃え */
  /* align-items: stretch;     親の高さに合わせる（デフォルト） */
}

/* 子要素の共通デザイン */
.item {
  width: 100px;
  background-color: #00bcd4; /* 水色 */
  color: white;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

/* アイテムごとに中身の量（高さ）を変える */
.tall {
  height: 80px;
}

実行結果

【実践サンプル】よくある「ナビゲーションメニュー」を作ろう

それでは、これまでの知識を総動員して、実践で使える「横並びメニュー」を作ってみましょう。

HTML

<nav class="navbar">
  <div class="logo">My Logo</div>
  <ul class="nav-links">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between; /* ロゴとメニューを両端に離す */
  align-items: center;           /* 上下中央に揃える */
  background-color: #333;
  padding: 10px 20px;
  color: white;
}

.nav-links {
  display: flex;       /* リスト項目(li)を横に並べるためにここもflex！ */
  list-style: none;    /* 点を消す */
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;   /* メニュー同士の間隔をあける */
  cursor: pointer;
}

実行結果のポイント

二重のFlexbox：全体の枠組み（.navbar）を横並びにするためにdisplay: flexを使い、さらに右側のメニューリスト（.nav-links）も横に並べるためにdisplay: flexを使っています。
上下中央：ロゴとメニューの高さが違っても、align-items: centerのおかげで綺麗に中心で揃います。