CSS Flexboxチートシート

基本構造

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
}

コンテナのプロパティ

flex-direction（主軸の方向）

flex-wrap（折り返し）

justify-content（主軸の配置）

align-items（交差軸の配置）

align-content（複数行の配置）

gap（アイテム間の余白）

アイテムのプロパティ

flex（flex-grow, flex-shrink, flex-basis）

.item {
  flex: 1;              /* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  flex: 1 1 auto;       /* grow shrink basis */
  flex: 0 0 200px;      /* 固定幅 */
}

/* 個別指定 */
.item {
  flex-grow: 1;         /* 余白を埋める比率 */
  flex-shrink: 0;       /* 縮小しない */
  flex-basis: 200px;    /* 基本サイズ */
}

align-self（個別の交差軸配置）

order（並び順）

よく使うパターン

中央揃え

/* 完全中央 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

ナビゲーション

/* 左右に分ける */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 右寄せ */
.nav {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

カードグリッド

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

.card {
  flex: 1 1 300px; /* 最小300px、余白を均等に分配 */
}

サイドバーレイアウト

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 250px; /* 固定幅 */
}

.main {
  flex: 1; /* 残りを全て使う */
}

フッターを下に固定

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

footer {
  flex-shrink: 0;
}

等幅カラム

.columns {
  display: flex;
}

.column {
  flex: 1;
}

入力フォーム

.input-group {
  display: flex;
}

.input-group input {
  flex: 1;
}

.input-group button {
  flex-shrink: 0;
}

アイコン + テキスト

.icon-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

メディアオブジェクト

.media {
  display: flex;
  gap: 16px;
}

.media-image {
  flex-shrink: 0;
}

.media-body {
  flex: 1;
}

ショートハンド

参考リソース

• MDN: CSS Flexible Box Layout - MDN 公式ガイド
• W3C CSS Flexible Box Layout Module - W3C 仕様
• MDN: Basic concepts of flexbox - 基本概念解説
• A Complete Guide to Flexbox (CSS-Tricks) - 視覚的リファレンス

関連記事

• CSS Gridチートシート - Grid Layout
• Tailwindチートシート - ユーティリティCSS
• レスポンシブデザイン - 実践