CSS Flexbox/Gridリファレンス - モダンレイアウトの全プロパティと実践パターン

CSS FlexboxとGridは、モダンなWebレイアウトを構築するための2大レイアウトシステム。Flexboxは1次元（行または列）のレイアウト、Gridは2次元（行と列の同時制御）のレイアウトに適している。

Flexbox

コンテナのプロパティ

Flexコンテナ（親要素）に設定するプロパティ。

display

.container {
  display: flex;        /* ブロックレベルのFlexコンテナ */
  display: inline-flex; /* インラインレベルのFlexコンテナ */
}

flex-direction

主軸（アイテムの並び方向）を指定する。

値	説明
`row`	左から右へ横並び（デフォルト）
`row-reverse`	右から左へ横並び
`column`	上から下へ縦並び
`column-reverse`	下から上へ縦並び

.container {
  flex-direction: row;
}

flex-wrap

アイテムの折り返しを制御する。

値	説明
`nowrap`	折り返さない（デフォルト）
`wrap`	折り返す
`wrap-reverse`	逆方向に折り返す

flex-flow

flex-directionとflex-wrapのショートハンド。

.container {
  flex-flow: row wrap; /* flex-direction flex-wrap */
}

justify-content

主軸方向のアイテム配置を制御する。

値	説明
`flex-start`	先頭に寄せる（デフォルト）
`flex-end`	末尾に寄せる
`center`	中央に寄せる
`space-between`	両端に寄せ、間を均等に空ける
`space-around`	各アイテムの両側に均等な余白を設定
`space-evenly`	すべての間隔を均等にする

align-items

交差軸方向のアイテム配置を制御する（1行分）。

値	説明
`stretch`	コンテナの高さに伸ばす（デフォルト）
`flex-start`	交差軸の先頭に寄せる
`flex-end`	交差軸の末尾に寄せる
`center`	交差軸の中央に寄せる
`baseline`	テキストのベースラインに揃える

align-content

複数行の場合の交差軸方向の配置を制御する。flex-wrap: wrapの場合のみ有効。

値	説明
`stretch`	行を均等に伸ばす（デフォルト）
`flex-start`	先頭に寄せる
`flex-end`	末尾に寄せる
`center`	中央に寄せる
`space-between`	両端に寄せ、間を均等に空ける
`space-around`	各行の両側に均等な余白を設定
`space-evenly`	すべての間隔を均等にする

gap

アイテム間の余白を設定する。

.container {
  gap: 16px;          /* 行間・列間の両方 */
  gap: 16px 24px;     /* 行間 列間 */
  row-gap: 16px;      /* 行間のみ */
  column-gap: 24px;   /* 列間のみ */
}

アイテムのプロパティ

Flexアイテム（子要素）に設定するプロパティ。

order

アイテムの表示順序を変更する。デフォルトは0。値が小さいほど先に表示される。

.item-a { order: 2; }
.item-b { order: -1; } /* 最も先に表示 */
.item-c { order: 1; }
/* 表示順: B → C → A */

flex-grow

余剰スペースをアイテムに分配する比率。デフォルトは0（伸びない）。

.item-a { flex-grow: 1; } /* 余剰の1/3を取得 */
.item-b { flex-grow: 2; } /* 余剰の2/3を取得 */

flex-shrink

スペース不足時にアイテムを縮小する比率。デフォルトは1。0で縮小を無効化。

.item { flex-shrink: 0; } /* 縮小しない */

flex-basis

アイテムの初期サイズ。width/heightの代わりに使用する。

値	説明
`auto`	アイテムのコンテンツサイズ（デフォルト）
`0`	コンテンツサイズを無視し、flex-growの比率のみで決定
`200px`	固定の初期サイズ
`30%`	コンテナに対する割合

flex

flex-grow、flex-shrink、flex-basisのショートハンド。

.item {
  flex: 0 1 auto;  /* デフォルト: 伸びない・縮む・autoサイズ */
  flex: 1;         /* flex: 1 1 0 と同等（均等分配） */
  flex: auto;      /* flex: 1 1 auto と同等 */
  flex: none;      /* flex: 0 0 auto と同等（固定サイズ） */
}

align-self

個別のアイテムの交差軸方向の配置を上書きする。

値	説明
`auto`	コンテナの`align-items`に従う（デフォルト）
`flex-start`	交差軸の先頭に寄せる
`flex-end`	交差軸の末尾に寄せる
`center`	交差軸の中央に寄せる
`stretch`	コンテナの高さに伸ばす
`baseline`	ベースラインに揃える

Grid

コンテナのプロパティ

Gridコンテナ（親要素）に設定するプロパティ。

display

.container {
  display: grid;        /* ブロックレベルのGridコンテナ */
  display: inline-grid; /* インラインレベルのGridコンテナ */
}

grid-template-columns / grid-template-rows

列と行のサイズを定義する。

.container {
  /* 固定サイズ */
  grid-template-columns: 200px 1fr 200px;

  /* fr単位（余剰スペースの分配比率） */
  grid-template-columns: 1fr 2fr 1fr;

  /* repeat関数 */
  grid-template-columns: repeat(3, 1fr);           /* 3列均等 */
  grid-template-columns: repeat(4, 200px);          /* 200px × 4列 */

  /* auto-fillとauto-fit（レスポンシブ対応） */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  /* minmax関数 */
  grid-template-columns: minmax(100px, 300px) 1fr;

  /* auto（コンテンツに合わせる） */
  grid-template-columns: auto 1fr auto;

  /* 行の定義 */
  grid-template-rows: 60px 1fr 40px;
}

auto-fillとauto-fitの違い:

関数	説明
`auto-fill`	空のトラックも含めてグリッドを埋める。アイテム数が少ない場合、空のトラックがスペースを占める
`auto-fit`	空のトラックを折りたたむ。アイテム数が少ない場合、既存のアイテムがスペースを埋める

grid-template-areas

名前付きエリアでレイアウトを定義する。

.container {
  grid-template-areas:
    "header  header  header"
    "sidebar content content"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 60px 1fr 40px;
}

各文字列が1行を表す
同じ名前は連続する矩形でなければならない
.（ドット）で空のセルを表す

grid-template

grid-template-rows、grid-template-columns、grid-template-areasのショートハンド。

.container {
  grid-template:
    "header header" 60px
    "sidebar content" 1fr
    "footer footer" 40px
    / 200px 1fr;
}

gap（grid-gap）

グリッドの行間・列間の余白を設定する。

.container {
  gap: 16px;          /* 行間・列間の両方 */
  gap: 16px 24px;     /* 行間 列間 */
  row-gap: 16px;
  column-gap: 24px;
}

justify-items

各セル内のアイテムの水平方向の配置。

値	説明
`stretch`	セル幅いっぱいに伸ばす（デフォルト）
`start`	セルの左端に寄せる
`end`	セルの右端に寄せる
`center`	セルの中央に配置

align-items

各セル内のアイテムの垂直方向の配置。値はjustify-itemsと同じ。

place-items

align-itemsとjustify-itemsのショートハンド。

.container {
  place-items: center;          /* 両方center */
  place-items: center start;    /* align-items justify-items */
}

justify-content

グリッド全体の水平方向の配置（グリッドがコンテナより小さい場合）。

値	説明
`start`	左寄せ（デフォルト）
`end`	右寄せ
`center`	中央
`space-between`	両端寄せ・均等配分
`space-around`	各トラックの両側に均等余白
`space-evenly`	すべての間隔を均等
`stretch`	トラックを伸ばしてコンテナを埋める

align-content

グリッド全体の垂直方向の配置。値はjustify-contentと同じ。

place-content

align-contentとjustify-contentのショートハンド。

grid-auto-columns / grid-auto-rows

明示的に定義されていないトラック（暗黙のトラック）のサイズを指定する。

.container {
  grid-auto-rows: 100px;            /* 暗黙の行は100px */
  grid-auto-rows: minmax(80px, auto); /* 最小80px、内容に合わせて伸びる */
}

grid-auto-flow

アイテムの自動配置アルゴリズムを制御する。

値	説明
`row`	行方向に順番に配置（デフォルト）
`column`	列方向に順番に配置
`dense`	空きスペースを埋めるように配置
`row dense`	行方向 + 密に配置

アイテムのプロパティ

Gridアイテム（子要素）に設定するプロパティ。

grid-column / grid-row

アイテムの配置範囲をグリッドライン番号で指定する。

.item {
  grid-column: 1 / 3;      /* 列ライン1から3まで（2列分） */
  grid-column: 1 / -1;     /* 最初から最後まで（全列） */
  grid-column: span 2;     /* 2列分 */
  grid-column: 2;           /* 列ライン2に配置 */

  grid-row: 1 / 3;         /* 行ライン1から3まで（2行分） */
}

個別指定も可能:

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

grid-area

名前付きエリアへの配置、またはgrid-rowとgrid-columnのショートハンド。

/* 名前付きエリアへの配置 */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

/* ショートハンド: row-start / column-start / row-end / column-end */
.item {
  grid-area: 1 / 1 / 3 / 3;
}

justify-self

個別のアイテムの水平方向の配置を上書きする。値はjustify-itemsと同じ。

align-self

個別のアイテムの垂直方向の配置を上書きする。値はalign-itemsと同じ。

place-self

align-selfとjustify-selfのショートハンド。

.item {
  place-self: center;         /* 両方center */
  place-self: center end;     /* align-self justify-self */
}

FlexboxとGridの使い分け

観点	Flexbox	Grid
レイアウトの次元	1次元（行 or 列）	2次元（行 × 列）
得意なパターン	ナビゲーション、ツールバー、カード列	ページ全体、ダッシュボード、複雑なグリッド
サイズ決定	コンテンツ起点（内→外）	レイアウト起点（外→内）
動的なアイテム数	得意（折り返しで対応）	auto-fill/auto-fitで対応可
1次元の並び	最適	可能だが冗長
行と列の同時制御	不可	最適

基本方針: 1次元の並びにはFlexbox、2次元のグリッド配置にはGridを使う。両者は組み合わせて使うことも多い（Grid内のセルにFlexboxを適用するなど）。

よくあるレイアウトパターン

完全なセンタリング

/* Flexbox */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Grid（最短） */
.center-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

ナビゲーションバー

ロゴを左、メニューを右に配置する定番パターン。

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
}

聖杯レイアウト（Holy Grail）

ヘッダー、フッター、サイドバー2つ、メインコンテンツの5領域レイアウト。

.holy-grail {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "left    main    right"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.left    { grid-area: left; }
.main    { grid-area: main; }
.right   { grid-area: right; }
.footer  { grid-area: footer; }

レスポンシブカードグリッド

メディアクエリなしでレスポンシブに対応するカードグリッド。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.card-body {
  flex: 1;          /* 残りスペースを埋める */
  padding: 16px;
}

.card-footer {
  padding: 16px;
  margin-top: auto; /* 下部に固定 */
}

スティッキーフッター

コンテンツが少なくてもフッターを画面下部に固定する。

/* Flexbox */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1; /* 残りスペースを全て占有 */
}

/* Grid */
.page-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

均等分割レイアウト

/* 3等分 */
.equal-columns {
  display: flex;
  gap: 16px;
}

.equal-columns > * {
  flex: 1; /* 均等に分配 */
}

サイドバー + メインコンテンツ

.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  min-height: 100vh;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

中央寄せのコンテナ + 幅制限

.container {
  display: grid;
  grid-template-columns: 1fr min(1200px, 100% - 48px) 1fr;
}

.container > * {
  grid-column: 2;
}

Flexboxで最後の行を左寄せ

justify-content: space-between使用時に、最終行のアイテムが左寄せにならない問題への対処。

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

.grid-flex::after {
  content: "";
  flex: auto; /* 残りスペースを埋める疑似要素 */
}

.grid-flex > * {
  width: calc((100% - 32px) / 3); /* 3列の場合 */
}

CSS Flexbox/Gridリファレンス - モダンレイアウトの全プロパティと実践パターン

Flexbox

コンテナのプロパティ

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

gap

アイテムのプロパティ

order

flex-grow

flex-shrink

flex-basis

flex

align-self

Grid

コンテナのプロパティ

display

grid-template-columns / grid-template-rows

grid-template-areas

grid-template

gap（grid-gap）

justify-items

align-items

place-items

justify-content

align-content

place-content

grid-auto-columns / grid-auto-rows

grid-auto-flow

アイテムのプロパティ

grid-column / grid-row

grid-area

justify-self

align-self

place-self

FlexboxとGridの使い分け

よくあるレイアウトパターン

完全なセンタリング

ナビゲーションバー

聖杯レイアウト（Holy Grail）

レスポンシブカードグリッド

スティッキーフッター

均等分割レイアウト

サイドバー + メインコンテンツ

中央寄せのコンテナ + 幅制限

Flexboxで最後の行を左寄せ

参考リンク

目次