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（主軸の方向）

.container {
  flex-direction: row;            /* 左→右（デフォルト） */
  flex-direction: row-reverse;    /* 右→左 */
  flex-direction: column;         /* 上→下 */
  flex-direction: column-reverse; /* 下→上 */
}

flex-wrap（折り返し）

.container {
  flex-wrap: nowrap;       /* 折り返さない（デフォルト） */
  flex-wrap: wrap;         /* 折り返す */
  flex-wrap: wrap-reverse; /* 逆方向に折り返す */
}

justify-content（主軸の配置）

.container {
  justify-content: flex-start;    /* 開始位置（デフォルト） */
  justify-content: flex-end;      /* 終了位置 */
  justify-content: center;        /* 中央 */
  justify-content: space-between; /* 両端揃え */
  justify-content: space-around;  /* 均等配置（両端に半分の余白） */
  justify-content: space-evenly;  /* 均等配置（均等な余白） */
}

align-items（交差軸の配置）

.container {
  align-items: stretch;    /* 伸縮（デフォルト） */
  align-items: flex-start; /* 開始位置 */
  align-items: flex-end;   /* 終了位置 */
  align-items: center;     /* 中央 */
  align-items: baseline;   /* ベースライン揃え */
}

align-content（複数行の配置）

.container {
  flex-wrap: wrap;
  align-content: flex-start;    /* 開始位置 */
  align-content: flex-end;      /* 終了位置 */
  align-content: center;        /* 中央 */
  align-content: space-between; /* 両端揃え */
  align-content: space-around;  /* 均等配置 */
  align-content: stretch;       /* 伸縮（デフォルト） */
}

gap（アイテム間の余白）

.container {
  gap: 20px;           /* 行と列の余白 */
  row-gap: 20px;       /* 行の余白 */
  column-gap: 10px;    /* 列の余白 */
  gap: 20px 10px;      /* row column */
}

アイテムのプロパティ

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（個別の交差軸配置）

.item {
  align-self: auto;       /* 親のalign-itemsに従う */
  align-self: flex-start;
  align-self: flex-end;
  align-self: center;
  align-self: baseline;
  align-self: stretch;
}

order（並び順）

.item {
  order: 0;  /* デフォルト */
  order: -1; /* 先頭に移動 */
  order: 1;  /* 後ろに移動 */
}

よく使うパターン

中央揃え

/* 完全中央 */
.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;
}

ショートハンド

/* flex-flow = flex-direction + flex-wrap */
.container {
  flex-flow: row wrap;
}

/* flex = flex-grow + flex-shrink + flex-basis */
.item {
  flex: 1 0 auto;
}

関連記事

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