Flexboxによるレスポンシブサイドバー

固定サイドバーと可変コンテンツ

サイドバーレイアウトは最も一般的なWebパターンの1つです：固定幅のナビゲーションパネルと可変のメインコンテンツエリア。Flexboxはこれをエレガントに処理します。

CSSコード

.layout {
  display: flex;
  gap: 24px;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
  min-width: 0;
}

仕組み

• サイドバー: flex: 0 0 250pxはサイドバーが拡大せず（flex-grow: 0）、縮小せず（flex-shrink: 0）、固定ベースが250pxであることを意味します。
• メインコンテンツ: flex: 1は残りのスペースすべてを埋めるように拡大します。min-width: 0はコンテンツのオーバーフローを防ぎます。

レスポンシブ対応

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    flex-basis: auto;
  }
}

小さい画面では、flex-direction: columnに切り替えてサイドバーをメインコンテンツの上（または下）にスタックします。

min-width: 0が重要な理由

デフォルトでは、フレックスアイテムはmin-width: autoを持ち、コンテンツの最小幅以下に縮小するのを防ぎます。min-width: 0を設定すると、フレックスアイテムがコンテンツ幅を超えて縮小でき、適切なテキスト折り返しとオーバーフロー処理が可能になります。