Flexbox レイアウト学習ツール

Flexboxの基本

まずは、Flexboxを使わない場合と使った場合の違いを見てみましょう。

Flexboxを使わない場合

箱は上から下へ縦に並びます。

赤い箱

青い箱

緑の箱

Flexboxを使った場合

親要素に display: flex; を指定すると横並びになります。

.parent {
  display: flex;
}

赤い箱

青い箱

緑の箱

ポイント：display: flex; は、並べたい子要素ではなく、その子要素を包んでいる親要素に指定します。

親要素のFlex設定を操作してみよう

操作パネル

flex-direction

justify-content

align-items

flex-wrap

gap（20px）

子要素の数（5個）

親要素の高さ（300px）

色付きプレビュー

主軸 → 交差軸 ↓

Flexコンテナ（親）

現在適用されているCSS

主軸と交差軸の考え方

Flexboxで混乱しやすいのが「主軸（メイン軸）」と「交差軸（クロス軸）」です。

flex-direction: row の場合

主軸　　→ 横方向
交差軸　↓ 縦方向

flex-direction: column の場合

主軸　　↓ 縦方向
交差軸　→ 横方向

justify-content は主軸方向を調整し、align-items は交差軸方向を調整します。上のプレビューの矢印もあわせて確認してみましょう。

子要素側のFlex設定

ここからは、子要素それぞれに指定する flex-grow・flex-shrink・flex-basis を確認します。

子要素1

flex-grow

flex-shrink

flex-basis（px）

子要素2

flex-grow

flex-shrink

flex-basis（px）

子要素3

flex-grow

flex-shrink

flex-basis（px）

子要素1

子要素2

子要素3

flex-grow：余った幅をどの割合で広げるか
flex-shrink：幅が足りないときに、どの割合で縮むか
flex-basis：広がったり縮んだりする前の基本サイズ

実用レイアウト作例

作例1：ヘッダー

左にサイト名、右にメニューボタンを配置します。

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

サイト名

作例2：カードの横並び

3枚のカードを横並びにし、画面が狭くなったら折り返します。

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

カード1

カード2

カード3

作例3：管理画面のサイドバー

左にサイドバー、右にメイン画面を配置します。

.admin-layout {
  display: flex;
}

.sidebar {
  width: 240px;
}

.main-area {
  flex: 1;
}

ヘッダー

メイン画面

作例4：中央配置

箱を親要素の縦横中央に配置します。

.center-layout {
  display: flex;
  justify-content: center;
  align-items: center;
}

中央です

FlexboxとCSS Gridの違い

Flexbox

一方向に要素を並べるのが得意

例：横並びメニュー、ヘッダー、サイドバーとメイン

CSS Grid

行と列を使って、面全体を組むのが得意

例：管理画面全体、カード一覧、複雑なページ構成

どちらが優れているというものではなく、目的に応じて使い分けることが大切です。