CSS Flexbox レイアウト

CSS Flexbox完全ガイド
柔軟なレイアウトを実現する

Flexboxは、要素を横並びや縦並びに配置し、間隔や揃え方を柔軟にコントロールできるCSSのレイアウト手法です。
この記事では、Flexboxの基本から実践的なレイアウトパターンまでを解説します。

こんな人向けの記事です

要素を横並びにしたい
上下左右の中央揃えを実現したい
floatの代わりにモダンなレイアウト手法を使いたい

Step 1Flexboxの基本：display: flex

親要素に display: flex を指定すると、子要素が自動的に横並びになります。

HTML

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

CSS

.container {
  display: flex;
  gap: 8px;
}

gap プロパティ

gap を使うと、子要素間の間隔を簡単に指定できます。margin を個別に設定する必要がありません。

Step 2主軸の方向：flex-direction

flex-direction で要素の並ぶ方向を変更できます。

値	方向
`row`（デフォルト）	左から右
`row-reverse`	右から左
`column`	上から下
`column-reverse`	下から上

CSS

.container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

Step 3主軸の配置：justify-content

justify-content で主軸方向（横並びなら水平方向）の配置を制御します。

値	動作
`flex-start`	先頭に寄せる（デフォルト）
`flex-end`	末尾に寄せる
`center`	中央に配置
`space-between`	両端に寄せて均等配置
`space-around`	各要素の周囲に均等な余白
`space-evenly`	全ての間隔を均等に

space-between:

center:

CSS

/* 両端揃え */
.container {
  display: flex;
  justify-content: space-between;
}

/* 中央揃え */
.container {
  display: flex;
  justify-content: center;
  gap: 8px;
}

Step 4交差軸の配置：align-items

align-items で交差軸方向（横並びなら垂直方向）の配置を制御します。

小

中

大

CSS

.container {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  height: 100px;
  gap: 8px;
}

上下左右の完全中央揃え

justify-content: center と align-items: center を組み合わせると、要素を上下左右の中央に配置できます。

Step 5折り返し：flex-wrap

デフォルトでは要素は1行に収まろうとしますが、flex-wrap: wrap で折り返せます。

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item {
  flex: 0 0 calc(33.33% - 8px); /* 3列 */
}

Step 6子要素の伸縮：flex-grow / flex-shrink

プロパティ	役割	デフォルト
`flex-grow`	余白がある時にどれだけ伸びるか	0（伸びない）
`flex-shrink`	はみ出す時にどれだけ縮むか	1（縮む）
`flex-basis`	初期サイズ	auto

CSS

/* ショートハンド */
.item {
  flex: 1;          /* flex: 1 1 0% と同じ（均等に伸びる） */
}

.sidebar {
  flex: 0 0 250px;  /* 伸縮せず、幅250px固定 */
}

.main {
  flex: 1;          /* 残りの幅を全て使う */
}

まとめ

display: flex で子要素が横並びになる
flex-direction で並ぶ方向を変更
justify-content で主軸の配置（左寄せ/中央/均等）
align-items で交差軸の配置（上下の揃え方）
flex-wrap で折り返し
flex-grow / flex-shrink で伸縮を制御

CSS Flexbox完全ガイド柔軟なレイアウトを実現する