aduce ops

CSS Flexbox チートシート

flex-direction / wrap / justify-content / align-items / align-content / gap を全部試せる。 プレビューつきプレイグラウンド。

プレビュー
アイテム数4
1
2
3
4
flex-direction
flex-wrap
justify-content
align-items
align-content
gap
10px
CSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 10px;
}

CSS Flexbox チートシート（プレイグラウンド）とは

本ツールは、Flexbox（CSS Flexible Box Layout）のコンテナプロパティを ボタンクリックで切り替えながら、結果をリアルタイムで視覚確認できる無料オンラインツールです。仕様書や記事を読みながら頭で値を想像する代わりに、 実際にアイテムが動くのを見て理解できるため、Flexbox を初めて触る方にも、 プロパティの組み合わせ確認が必要なベテランにも有用です。

Flexbox の基本概念

主軸（main axis）と交差軸（cross axis）

Flexbox は主軸方向にアイテムを並べるレイアウトモデルです。flex-direction: row なら主軸は水平・交差軸は垂直、column ならその逆になります。各プロパティが 「どちらの軸に効くのか」を意識すると挙動が理解しやすくなります。

5 つのコンテナプロパティ

flex-direction（主軸の方向）

  • row（既定）— 左 → 右
  • row-reverse — 右 → 左
  • column — 上 → 下
  • column-reverse — 下 → 上

flex-wrap（折り返し）

  • nowrap（既定）— 1 行に収める。アイテムが縮む or はみ出る
  • wrap — 必要に応じて次の行に折り返し
  • wrap-reverse — 折り返し方向を反転

justify-content（主軸方向の配置）

  • flex-start（既定）— 主軸の起点側に詰める
  • flex-end — 終点側に詰める
  • center — 中央寄せ
  • space-between — 両端を揃え、間を均等
  • space-around — 各アイテムの両側に均等な余白
  • space-evenly — 全ての間隔（端含む）を均等

align-items（交差軸方向の配置 ── 1 行内）

  • stretch（既定）— 交差軸方向に引き伸ばす
  • flex-start — 交差軸の起点側
  • flex-end — 終点側
  • center — 中央
  • baseline — テキストのベースラインを揃える （フォントサイズの異なるアイテムが混在すると効果が出る）

align-content（交差軸方向の配置 ── 複数行間）

flex-wrap が wrap で複数行に折り返したときに意味を持ちます。 1 行しかない場合は無視されます。

  • stretch（既定）— 行を引き伸ばして埋める
  • flex-start / flex-end / center
  • space-between / space-around

align-items と align-content の違い（混乱ポイント）

どちらも交差軸方向に効きますが、対象が異なります:

  • align-items — 各行内でのアイテムの配置。 1 行のときも複数行のときも有効
  • align-content — 行同士の配置。flex-wrap: wrap で複数行に折り返したときだけ有効

本ツールで flex-wrap: wrap + アイテム数を多めにし、align-content を切り替えてみると違いがすぐに分かります。

典型レイアウト 5 例

1. 横並び（カードリスト）

flex-direction: row;
flex-wrap: wrap;
gap: 16px;

2. 中央配置（モーダル本文など）

flex-direction: row;
justify-content: center;
align-items: center;

3. 両端揃え（ナビバー）

flex-direction: row;
justify-content: space-between;
align-items: center;

4. 縦並び（フォーム）

flex-direction: column;
gap: 12px;

5. ベースライン揃え（混在フォント）

flex-direction: row;
align-items: baseline;

Flexbox vs Grid の使い分け

  • Flexbox: 1 次元レイアウト（行 or 列のどちらか）。 ナビバー、ボタン群、カードを横並び、フォームの縦並びなど
  • CSS Grid: 2 次元レイアウト（行と列の両方）。 ページ全体の骨格、ダッシュボード、複雑なカードレイアウトなど

コンテナ内のアイテムを1 方向に並べるだけなら Flexbox の方が シンプル。行と列の両方を制御したいなら Grid。 2 次元のセル配置のあとに、各セル内で 1 次元配置という組み合わせも一般的です。

使い方の流れ

  1. アイテム数を調整（折り返しの動きを見るなら 6 以上推奨）
  2. flex-direction で主軸方向を決定
  3. flex-wrap で折り返しを許可するか決定
  4. justify-content / align-items で配置
  5. 必要に応じて gap を調整
  6. 「コピー」で CSS を取得

関連ツール

プライバシー

操作内容はすべてブラウザ内で処理され、弊社サーバには送信しません。

関連ツール