FlexboxやCSS Gridの詳細な使い方について解説

keigo_fujiwara

2025年1月7日 00:02

FlexboxとCSS Gridの概要

FlexboxとCSS Gridは、CSSのレイアウト技術で、Webページのデザインを効率的に構築するために使用されます。それぞれの特性を理解し、適切に使い分けることで、美しく整理されたページを作成できます。

Flexbox： 主に1次元（行または列）レイアウトに適しています。
CSS Grid： 2次元（行と列）レイアウトに最適です。

この記事では、FlexboxとCSS Gridの基本的な使い方と主要なプロパティについて解説します。

1. Flexboxの基本

Flexbox（Flexible Box）は、要素を柔軟に配置するためのレイアウトモデルです。

Flexboxの主なプロパティ

1.1 display: flex

Flexboxを有効にするための設定です。

display: flex;

1.2 flex-direction

アイテムの配置方向を指定します。

row（デフォルト）：横方向
column：縦方向

flex-direction: row;

1.3 justify-content

水平方向の配置方法を指定します。

flex-start：左寄せ
center：中央寄せ
space-between：アイテム間を均等配置

justify-content: center;

1.4 align-items

垂直方向の配置方法を指定します。

stretch（デフォルト）：要素を引き伸ばす
center：中央寄せ

align-items: center;

1.5 flex-wrap

アイテムを複数行に折り返すかどうかを指定します。

nowrap（デフォルト）：折り返さない
wrap：折り返す

flex-wrap: wrap;

2. CSS Gridの基本

CSS Gridは、行と列で構成される2次元レイアウトを簡単に作成できる技術です。

CSS Gridの主なプロパティ

2.1 display: grid

Gridレイアウトを有効にするための設定です。

display: grid;

2.2 grid-template-columns / grid-template-rows

列や行のサイズを指定します。

repeat()：繰り返しパターンを指定
1fr：利用可能なスペースの割合

grid-template-columns: repeat(3, 1fr);

2.3 gap

行や列の間隔を指定します。

gap: 10px;

2.4 justify-items

セル内の水平配置を指定します。

start：左寄せ
center：中央寄せ

justify-items: center;

2.5 align-items

セル内の垂直配置を指定します。

start：上寄せ
center：中央寄せ

align-items: center;

FlexboxとCSS Gridの使い分け

Flexboxが適している場合：
- アイテムを1行または1列で整列させたい場合
- 簡単なナビゲーションバーの作成
CSS Gridが適している場合：
- 複雑なグリッドレイアウトが必要な場合
- ダッシュボードやカード型デザイン

まとめ

FlexboxとCSS Gridは、それぞれ得意分野が異なるため、適切に使い分けることが重要です。この2つの技術を組み合わせることで、効率的で美しいWebページを構築できます。

次回は、レスポンシブデザインでの実践的なFlexboxとCSS Gridの活用例を紹介します。お楽しみに！

筆者について

藤原圭吾

BeEngineer梅田校の責任者
プログラミング教室の運営および授業の実施
情報Ⅰの教材作成および映像授業に出演
アプリ「Let's Code Py」を運営
集客用LINEの運営および広報映像の編集