この記事の要点

親要素に display: flex を指定すると、子要素が横並びになる（デフォルト flex-direction: row） 主軸方向の整列は justify-content、交差軸方向は align-items 折り返しは flex-wrap: wrap、間隔は gap: 1em で簡単指定 子要素の伸縮は flex: 1 1 auto（grow / shrink / basis） IE11 は flex の一部仕様が独自 なので注意。現代は Flex (1D) + Grid (2D) を使い分け

display: flex の基本

子要素を横並びにするには、親要素に display: flex を指定します。子要素を一切いじらずに親だけで横並びにできるのが Flexbox の強みです。

  
A
  
B
  
C

.container {
  display: flex;          /* これだけで A B C が横並びに */
}

.item {
  padding: 1em;
  background: #e0e7ff;
  border: 1px solid #6366f1;
}

従来の float / display: inline-block での横並びは、クリアフィックスや空白文字対応など面倒でしたが、Flexbox はそれらを全て解決します。

flex-direction（並び方向）

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

.container {
  display: flex;
  flex-direction: row;          /* 横並び */
  /* flex-direction: column; */ /* 縦並びにしたい時 */
}

justify-content（主軸方向の整列）

横並び（row）の場合、主軸は水平方向。子要素の余白の分配を制御します:

値	挙動
flex-start（デフォルト）	左寄せ
flex-end	右寄せ
center	中央揃え
space-between	両端寄せ、間に等間隔
space-around	各要素の左右に等しい余白
space-evenly	すべての余白が等しい

/* ナビゲーション右端寄せ */
.nav {
  display: flex;
  justify-content: flex-end;
}

/* ロゴ + メニューで両端 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 完全中央 */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

align-items（交差軸方向の整列）

横並びの場合、交差軸は垂直方向。子要素の縦位置を制御します:

値	挙動
stretch（デフォルト）	親の高さに合わせて引き伸ばす
flex-start	上揃え
flex-end	下揃え
center	垂直中央
baseline	文字のベースラインで揃える

flex-wrap（折り返し）

子要素が親の幅を超えるとき、デフォルトでは縮みます。折り返したい場合は:

.gallery {
  display: flex;
  flex-wrap: wrap;          /* 幅を超えたら下に折り返す */
  gap: 1em;                 /* 子要素の間隔 */
}

.gallery .item {
  flex: 0 0 calc(33.333% - 1em);  /* 3 列 */
}

/* ショートハンド */
.shorthand {
  flex-flow: row wrap;      /* flex-direction + flex-wrap */
}

gap（モダンな間隔指定）

Flexbox の gap は CSS Grid と同様、子要素間の余白を一括指定します。margin ハックが要らなくなります（Safari 14.1+ / Chrome 84+ / Firefox 63+）:

.list {
  display: flex;
  gap: 1em;                 /* 縦横とも 1em */
  /* gap: 1em 2em; */       /* 縦 1em / 横 2em */
  /* row-gap: 1em; column-gap: 2em; */
}

子要素側のプロパティ

プロパティ	役割
flex-grow	余った空間を吸う比率（デフォルト 0）
flex-shrink	足りない時の縮む比率（デフォルト 1）
flex-basis	基本サイズ（デフォルト auto）
flex: 1 1 auto	上 3 つのショートハンド
order	並び順（数値が小さいほど先頭）
align-self	個別の交差軸整列

.sidebar {
  flex: 0 0 240px;          /* 固定 240px */
}

.main {
  flex: 1 1 auto;           /* 残り全部を吸う */
}

/* 上揃えだけ自分は中央 */
.special {
  align-self: center;
}

典型レイアウト例

ヘッダー（ロゴ + ナビ）

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
}
.header nav ul {
  display: flex;
  gap: 1.5em;
  list-style: none;
}

カードのグリッド（3 列レスポンシブ）

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.cards .card {
  flex: 1 1 calc(33.333% - 1em);
  min-width: 240px;       /* 画面が狭くなったら 2 列 / 1 列に */
  padding: 1em;
  background: #f9fafb;
  border-radius: 8px;
}

中央寄せモーダル

.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal {
  background: #fff;
  padding: 2em;
  border-radius: 8px;
  max-width: 480px;
}

Flexbox と Grid の使い分け

項目	Flexbox	Grid
次元	1 次元（横 or 縦）	2 次元（行 + 列）
得意	ナビ / カード列 / フォーム行	ページレイアウト / カード壁面 / マガジンレイアウト
子のサイズ指定	子側で flex: 1	親側で grid-template-columns
折り返し	flex-wrap	標準で 2D 配置

IE11 の注意点

IE11 では Flexbox が動きますが、独自のバグが多い:

• min-height 内の Flexbox で高さ計算が狂う
• flex: 1 ショートハンドが正しく解釈されないことがある（flex: 1 1 0% と書く）
• gap 非対応 → margin で代替
• align-items: stretch + 子の height: auto でバグる

2024 年現在、IE サポートは MS 自身が終了しています。Edge / Chrome / Firefox / Safari のみ対応なら気にする必要はありません。

FAQ

Q: 子要素が縮まずに親をはみ出す
A: 子に min-width: 0 を指定。Flex アイテムは内容に基づく最小幅を持つため、長い文字列等で縮まないことがあります。

Q: 横並びの幅を均等にしたい
A: 子全部に flex: 1（= flex: 1 1 0）を指定。これで余白を均等分配します。

Q: display: flex と display: inline-flex の違い
A: 前者は親自体が block（幅 100%）、後者は inline（内容分の幅）。ボタンの中身を flex で並べたいときは inline-flex。