Flexboxパターン・レイアウト集｜よく使う配置からサイト構成まで

.container {
  display: flex;  /* 子要素を横並びにする（Flexboxを有効化） */
  gap: 8px;    /* 子要素どうしの隙間を8pxに設定 */
}

.container {
  display: flex;
  gap: 8px;
}
.item {
  flex: 1;  /* アイテム数に関わらず均等な幅にする */
}

.container {
  display: flex;
  justify-content: center;  /* 主軸（横方向）の中央に揃える */
  align-items: center;    /* 交差軸（縦方向）の中央に揃える */
  height: 100vh;          /* ※縦中央には高さが必要 */
}

.header {
  display: flex;
  justify-content: space-between;  /* 最初と最後を両端に配置 */
  align-items: center;           /* 縦方向を中央に揃える */
}
.nav {
  display: flex;  /* nav内のリンクも横並びにする */
  gap: 8px;
}

.search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.icon, .btn {
  flex-shrink: 0;  /* 縮まないよう固定 */
}
.input {
  flex: 1;  /* 残りのスペースをすべて占有する */
}

.cards {
  display: flex;
  flex-wrap: wrap;  /* 収まらない場合に次の行へ折り返す */
  gap: 10px;
}
.card {
  width: 120px;  /* 幅を固定（折り返しても変わらない） */
}

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  list-style: none;
  padding: 0;
}
.flex-grid li {
  /* 計算式: (親幅100% - gap 12px × 2) ÷ 3 */
  width: calc((100% - 24px) / 3);
  box-sizing: border-box;  /* paddingを幅の内側に含める */
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.card {
  flex: 1 1 120px;
  /* flex-grow: 1   → 余ったスペースを均等に広がる */
  /* flex-shrink: 1 → スペース不足なら均等に縮む */
  /* flex-basis: 120px → 基準幅。これ以下になると折り返す */
}

.sidebar {
  display: flex;
  flex-direction: column;  /* 並ぶ方向を縦（上から下）に変更 */
  gap: 4px;
}

.cards {
  display: flex;
  gap: 10px;
  /* align-items のデフォルト値は stretch */
  /* stretch = 子要素を親の高さいっぱいに引き伸ばす */
}
.card {
  flex: 1;  /* 残りスペースを均等に分け合う */
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.push-right {
  margin-left: auto;  /* 左の余白を最大化して右端へ押し出す */
}

body {
  display: flex;
  flex-direction: column;  /* ヘッダー・本体・フッターを縦に並べる */
  min-height: 100vh;       /* 最低でも画面全体の高さを確保 */
}
.body-wrap {
  display: flex;  /* サイドバーとメインを横並びにする */
  flex: 1;        /* 縦の残りスペースをすべて占有する */
}
.sidebar {
  width: 200px;
  flex-shrink: 0;  /* 縮まないよう固定 */
}
main {
  flex: 1;  /* 残りスペースをすべて占有 */
}

.body-wrap {
  display: flex;
  gap: 24px;
  align-items: flex-start;  /* 上揃え（stretchだとサイドバーも伸びる） */
}
main {
  flex: 1;
  min-width: 0;  /* 長いURLなどのはみ出し防止 */
}
.sidebar {
  flex: 0 0 220px;
  /* grow: 0 → 広がらない */
  /* shrink: 0 → 縮まない */
  /* basis: 220px → 幅を220pxに固定 */
}

.body-wrap {
  display: flex;
  gap: 16px;
}
.nav-left {
  flex: 0 0 160px;  /* 幅を160pxに固定 */
}
main {
  flex: 1;       /* 残りスペースをすべて占有して伸縮 */
  min-width: 0;
}
.aside-right {
  flex: 0 0 180px;  /* 幅を180pxに固定 */
}

/* PC：横並び */
.sections {
  display: flex;
  gap: 24px;
}
section {
  flex: 1;
}

/* スマホ：縦積み（flex のまま方向だけ変える） */
@media (max-width: 768px) {
  .sections {
    flex-direction: column;  /* 縦方向に変えるだけで縦積みになる */
    /* gap はそのまま縦の隙間として使える ✓ */
  }
}

/* PC：横並び（方法Aと同じ） */
.sections {
  display: flex;
  gap: 24px;
}

/* スマホ：縦積み（block に戻してシンプルに） */
@media (max-width: 768px) {
  .sections {
    display: block;  /* Flexboxをやめて縦積みに */
  }
  section {
    margin-bottom: 24px;  /* gap の代わりに margin で隙間を作る */
  }
  section:last-child {
    margin-bottom: 0;
  }
}