【CSS】Flexboxまとめ

✔️子要素を横並びにしたいときは、親要素に display: flex; を指定する。

css

.parent {
  display: flex;
}

✔️縦並び、横並び

css

.parent {
  display: flex;
  flex-direction: row;     /* 横並び（→） */
  flex-direction: column;  /* 縦並び（↓） */
}

✔️横方向の並び位置：justify-content

css

.parent {
  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

css

.parent {
  align-items: stretch;      /* 左寄せ（デフォルト） */
  align-items: flex-start;   /* 上寄せ */
  align-items: center;       /* 中央揃え */
  align-items: baseline;     /* テキストのベースライン揃え */
}

✔️子要素を1つだけ右寄せにしたい：margin-left: auto

✔️要素を折り返したい：flex-wrap: wrap

✔️TailwindCSSでのFlexクラス一覧（抜粋）

Tailwindクラス	意味
flex	フレックスボックス化
flex-row / flex-col	横 or 縦
justify-start	左寄せ（横）
justify-center	中央寄せ（横）
justify-end	右寄せ（横）
justify-between	両端＋間を均等
items-center	中央揃え（縦）
items-start	上寄せ（縦）
items-end	下寄せ（縦）
gap-4	子要素の間に余白