← カテゴリ一覧に戻る

Flexbox（横・縦並び）

display: flexflex-directionjustify-contentalign-items

Flexboxは一次元レイアウトシステムで、行または列方向に要素を柔軟に並べることができます。コンテナとアイテムの2層構造で制御します。

デモ：flex-direction

flex-direction: row（デフォルト）

A
B
C
D

flex-direction: column

A
B
C
D

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

justify-content: flex-start

1
2
3

justify-content: center

1
2
3

justify-content: flex-end

1
2
3

justify-content: space-between

1
2
3

justify-content: space-around

1
2
3

justify-content: space-evenly

1
2
3

デモ：align-items（交差軸方向の配置）

align-items: flex-start

1
2
3

align-items: center

1
2
3

align-items: flex-end

1
2
3

align-items: stretch（デフォルト）

1
2
3

デモ：flex-grow / flex-shrink / flex-basis

flex-grow: 1（均等に余白を埋める）

grow: 1
grow: 2
grow: 1

flex-basis（基準サイズの指定）

basis: 100px
basis: 200px
basis: 150px

デモ：flex-wrap（折り返し）

flex-wrap: nowrap（デフォルト・はみ出す）

1
2
3
4
5
6
7

flex-wrap: wrap（折り返す）

1
2
3
4
5
6
7

NEWgap プロパティ（Flexboxでも使用可能に）

もともとGridレイアウト専用だった gap が、2020〜2021年頃からFlexboxでも使えるようになりました。row-gap と column-gap を個別に指定することも可能です。

gap: 16px 32px
→ row-gap: 16px
→ column-gap: 32px
アイテムD
アイテムE
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px; /* row-gap column-gap */
  /* または */
  row-gap: 16px;
  column-gap: 32px;
}

コード例

/* Flexコンテナの基本設定 */
.container {
  display: flex;
  flex-direction: row;       /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;           /* nowrap | wrap | wrap-reverse */
  justify-content: center;   /* 主軸方向の配置 */
  align-items: stretch;      /* 交差軸方向の配置 */
  align-content: flex-start; /* 複数行の配置（wrap時に有効） */
  gap: 16px;                 /* アイテム間の間隔 */
}

/* Flexアイテムの設定 */
.item {
  flex-grow: 1;    /* 余白を埋める割合（デフォルト: 0） */
  flex-shrink: 1;  /* 縮小する割合（デフォルト: 1） */
  flex-basis: auto;/* 基準サイズ（デフォルト: auto） */
  /* 短縮形: flex: grow shrink basis */
  flex: 1 1 auto;

  order: 0;        /* 並び順（小さいほど先） */
  align-self: auto;/* このアイテムのみalign-itemsを上書き */
}

比較：Flexbox vs Grid

観点FlexboxGrid
次元1次元（行 or 列）2次元（行 and 列）
得意なレイアウトナビゲーション、カード一覧ページ全体のレイアウト
アイテムサイズコンテンツに依存しやすいグリッドセルで厳密に制御
ブラウザサポート✅ 非常に広い✅ 広い（Subgridは2023〜）

🤖 AIプロンプトテンプレート

CSS Flexboxを使ったレイアウトの実装例をReact + Tailwind CSSで作成してください。

要件:
- flex-direction: row / row-reverse / column / column-reverse の比較デモ
- justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly の比較
- align-items: flex-start / flex-end / center / stretch / baseline の比較
- flex-wrap: nowrap / wrap / wrap-reverse の挙動比較
- flex-grow / flex-shrink / flex-basis の使い方と違い
- align-self で個別アイテムの配置を変える例
- ドロップダウンで各プロパティ値を変更してリアルタイムでレイアウトが変わるインタラクティブデモ

プロパティ値を選んでFlexboxの動作をリアルタイムで確認できるビジュアルデモにしてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo