【CSS学習】CSSのdisplay:flexの使い方と仕組みを徹底解説｜flexboxで自由自在なレイアウトを実現！

Webサイトのデザインを整える上で欠かせないのが「要素の配置」です。
特に、複雑なレイアウトをシンプルに実現できるのが display: flex（フレックスボックス） です。

従来、要素を横並びにしたり中央寄せするには、floatやinline-blockなどを使って調整する必要がありました。
しかし、display: flexを使えば、わずか数行のCSSで縦横の整列・間隔調整・比率指定まで簡単に行えます。

この記事では、初心者でも理解しやすいように「基本的な仕組み」から「よく使うプロパティ」まで、実例を交えて詳しく解説していきます。

display: flexとは？

display: flexは、親要素（コンテナ） 内で 子要素（アイテム） を柔軟に配置できるレイアウトモードです。

.container {
  display: flex;
}

この指定を行うことで、.container の中のすべての子要素が自動的に 横並び になります。
これだけでもすぐにレイアウトが変化するため、初めて触れると「何が起きたの？」と思う方も多いですが、これがフレックスボックスの基本的な動作です。

flexboxの基本構造

フレックスボックスには、2つの役割が存在します。

役割対象例
コンテナ親要素.container { display: flex; }
アイテム子要素.container > div { ... }

親が「コンテナ」としてdisplay: flexを指定すると、子が「アイテム」として自動的にフレックスのルールで整列します。

子要素を横並び・縦並びにする（flex-direction）

flex-directionで、要素を横並び（row）または縦並び（column）にすることができます。

.container {
  display: flex;
  flex-direction: row; /* 横並び（初期値） */
}

.container-column {
  display: flex;
  flex-direction: column; /* 縦並び */
}

ポイント

  • row：左から右に並ぶ（デフォルト）
  • row-reverse：右から左に並ぶ
  • column：上から下に並ぶ
  • column-reverse：下から上に並ぶ

コード例

See the Pen Untitled by suguru (@suguru22) on CodePen.

要素を中央寄せにする（justify-content・align-items）

Flexboxの最大の魅力は、要素の「中央揃え」が驚くほど簡単にできることです。

.container {
  display: flex;
  justify-content: center; /* 横方向の中央揃え */
  align-items: center; /* 縦方向の中央揃え */
  height: 200px;
  background: #f0f0f0;
}

よく使う値まとめ

プロパティ主な値説明
justify-contentflex-start, center, flex-end, space-between, space-around横方向の整列
align-itemsflex-start, center, flex-end, stretch, baseline縦方向の整列

コード例

See the Pen Untitled by suguru (@suguru22) on CodePen.

アイテムごとの比率を変える（flex-grow, flex-shrink, flex-basis）

Flexboxでは、子要素ごとに「どのくらいの幅を取るか」を柔軟に指定できます。

.item1 {
  flex: 1; /* 残りのスペースを均等に分配 */
}
.item2 {
  flex: 2; /* item1の2倍の幅を取る */
}

上記のように指定すると、画面サイズが変わっても自動的に比率を維持してレイアウトされます。
これが、従来のfloatやinline-blockでは実現しにくかった「レスポンシブな伸縮レイアウト」を簡単に作れる理由です。

See the Pen Untitled by suguru (@suguru22) on CodePen.

子要素を折り返す（flex-wrap）

初期状態では、要素が1行に収まらない場合でも折り返されずに横スクロールが発生します。
それを防ぐには、flex-wrapを指定します。

.container {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
}

コード例

See the Pen Untitled by suguru (@suguru22) on CodePen.

よくある実用例

横並びのボタンを中央寄せ

.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
}

See the Pen Untitled by suguru (@suguru22) on CodePen.

カードレイアウトを3列で自動調整

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

.card {
  flex: 1 1 calc(33.333% - 20px);
  background: #fff;
  border-radius: 10px;
}

これで、画面幅に応じてカードが折り返されるレスポンシブなレイアウトを簡単に実現できます。

See the Pen Untitled by suguru (@suguru22) on CodePen.

よくある間違い・注意点

  • display: flexは親に指定する
    → 子要素に書いても効果はありません。
  • justify-contentとalign-itemsの方向を混同しない
    → flex-directionを変えると、方向の意味が入れ替わる点に注意。
  • 親の高さがないと中央揃えが効かない場合がある
    → align-items: centerを使うときはheightを設定しておくと安心です。

まとめ

ポイント内容
display: flex;子要素を横並びに配置
flex-direction並び方向を指定
justify-content横方向の位置揃え
align-items縦方向の位置揃え
flex-wrap折り返し設定
flex子要素の比率設定

display: flexは、CSSレイアウトの中でも最も強力で直感的なプロパティの1つです。
基本を理解すれば、複雑なグリッドやレスポンシブデザインもぐっと簡単になります。

タイトルとURLをコピーしました