Flexboxによるナビゲーションバー

Flexboxナビゲーションバー

ナビゲーションバーはFlexboxの最も一般的なユースケースの1つです。通常、左にロゴ、中央または右にナビゲーションリンク、最右にアクションボタンがあります。

CSSコード

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.logo {
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  gap: 24px;
  flex: 1;
  justify-content: center;
}

.actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

仕組み

ナビバーはネストされたフレックスコンテナを使用します：

1. 外部コンテナ: justify-content: space-betweenでロゴとアクションを両端に配置。
2. ナビリンク: flex: 1のネストされたフレックスコンテナが残りスペースを占め、justify-content: centerでリンクを中央配置。
3. ロゴとアクション: flex: 0 0 autoで自然な幅を維持。

間隔戦略

パターン	CSS	結果
中央リンク	flex: 1; justify-content: center	ロゴとアクションの間にリンクを中央配置
右揃えリンク	nav-linksにmargin-left: auto	リンクを右に押し出す
均等配分	親にjustify-content: space-evenly	すべてのセクションを均等に配分

スティッキーナビバー

position: sticky; top: 0; z-index: 50;を追加して、スクロール中もナビバーを表示し続けます。