CSS入門 #3 - Flexboxで横並びレイアウトを作る

入門 | 12分 で読める | 2026.07.12

公式ドキュメント
CSS

今回やること

Flexboxは、要素を横並びや縦並びで整えるためのCSSです。

横並びにしたい要素そのものではなく、その親要素に display: flex を指定します。

今回はナビゲーションとカード一覧を作ります。

ナビゲーションを横並びにする

HTMLを用意します。

<nav class="nav">
  <a href="#profile">プロフィール</a>
  <a href="#learning">学習中</a>
  <a href="#contact">連絡先</a>
</nav>

CSSで親要素に display: flex を指定します。

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

gap は要素同士の間隔です。

左右に分ける

サイト名とメニューを左右に分ける例です。

<header class="site-header">
  <p class="logo">My Portfolio</p>
  <nav class="nav">
    <a href="#profile">プロフィール</a>
    <a href="#learning">学習中</a>
  </nav>
</header>

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
プロパティ役割
justify-content主軸方向の配置
align-items交差軸方向の配置
gap要素間の余白

カード一覧を作る

カードを3つ並べます。

<div class="card-list">
  <article class="card">
    <h2>HTML</h2>
    <p>ページの構造を作る。</p>
  </article>
  <article class="card">
    <h2>CSS</h2>
    <p>見た目を整える。</p>
  </article>
  <article class="card">
    <h2>JavaScript</h2>
    <p>動きを付ける。</p>
  </article>
</div>

.card-list {
  display: flex;
  gap: 16px;
}

.card {
  flex: 1;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: #ffffff;
}

flex: 1 を指定すると、カードが同じ幅で広がります。

折り返しを許可する

画面が狭い時に折り返したい場合は flex-wrap を使います。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 240px;
}

240px より狭くなりそうな時に、次の行へ回りやすくなります。

よくあるミス

ミス問題修正
子要素に display: flex を書く横並びにならない親要素に指定
gap ではなく全部に margin余白管理が複雑になるFlexboxでは gap を優先
狭い画面でも横並び固定はみ出すflex-wrap を使う
align-items と justify-content を混同配置が想定と違う主軸と交差軸を確認

練習

次を作ってください。

  1. ヘッダー内でロゴとナビを左右配置する
  2. 3つの学習カードを横並びにする
  3. カード間に gap を入れる
  4. 画面が狭い時に折り返すようにする

次のステップ

CSS入門 #4 - Gridでカード一覧を作る で、より一覧向きのレイアウトを作ります。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR