CSS 导航栏

使用 Flexbox 创建 CSS 导航栏

导航栏是大多数网站的基本组成部分。现代 CSS，特别是 Flexbox，使得创建响应式和灵活的导航栏比旧方法简单得多。

演示：一个简单的水平导航栏

下面是一个水平导航栏的概念性展示，你可以使用 HTML 和 CSS 来构建。我们将使用 Flexbox 进行对齐。

Home News Articles Forum Contact About

导航栏：HTML 结构

导航栏本质上是链接的列表。语义化的 HTML 结构通常使用无序列表 (<ul>) 包含列表项 (<li>)，每个列表项内含一个锚点标签 (<a>)。

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item"><a href="#home">Home</a></li>
    <li class="nav-item"><a href="#news">News</a></li>
    <li class="nav-item"><a href="#contact">Contact</a></li>
    <li class="nav-item"><a href="#about">About</a></li>
  </ul>
</nav>

基本样式（重置和基础）

首先，让我们移除默认的列表样式，并为导航列表设置基础。

/* 列表的基本重置 */
.nav-list {
  list-style-type: none; /* 移除列表点 */
  margin: 0;
  padding: 0;
  background-color: #333; /* 导航栏的深色背景 */
}

/* 单个导航项和链接的样式 */
.nav-item a {
  text-decoration: none; /* 移除链接下划线 */
  color: white; /* 链接文本颜色 */
  padding: 14px 20px; /* 链接文本周围的内边距 */
  display: block; /* 使整个区域可点击，而不仅仅是文本 */
  text-align: center;
}

/* 链接的悬停效果 */
.nav-item a:hover {
  background-color: #555; /* 悬停时背景颜色变深 */
}

使用 Flexbox 创建水平导航栏

要创建一个水平导航栏，我们将 display: flex 应用到 ul 元素 (.nav-list) 上。

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;

  /* --- Flexbox 属性 --- */
  display: flex;
  /* justify-content: flex-start; /* 默认：将项目与起始线对齐 */
  /* To center items: justify-content: center; /* 要使项目居中：justify-content: center; */
  /* To space items out: justify-content: space-around; or space-between; /* 要在项目之间分配空间：justify-content: space-around; 或 space-between; */
}

/* 对于水平布局，单独的列表项不再需要特殊的 display 属性 */
.nav-item a {
  /* 上述样式（text-decoration, color, padding, display: block） */
  text-decoration: none;
  color: white;
  padding: 14px 20px;
  display: block;
}

.nav-item a:hover {
  background-color: #555;
}

Flexbox 说明：

• display: flex; on .nav-list：这将 ul 变为一个 flex 容器，其直接子元素（li 元素）成为 flex 项目，默认按行排列。
• justify-content：此属性（应用于 flex 容器 .nav-list）控制沿主轴（此处为水平轴）的对齐。常用值包括 flex-start（默认）、center、flex-end、space-between（第一个项目在起始，最后一个在末尾，空间均匀分布在其他项目之间）、space-around（每个项目周围有相等的空间）。
• 灵活性：Flex 项目还可以使用 flex-grow、flex-shrink 和 flex-basis 属性进行增长或收缩，从而更好地控制项目如何填充可用空间。

示例：部分导航项右对齐

Flexbox 可以轻松地将某些项目推到右侧，例如“登录”或“搜索”按钮。

HTML:
<ul class="nav-list">
  <li class="nav-item"><a href="#home">Home</a></li>
  <li class="nav-item"><a href="#news">News</a></li>
  <li class="nav-item nav-item-right"><a href="#login">Login</a></li>
</ul>

CSS:
.nav-list {
  display: flex;
  /* ... 其他样式 ... */
}

.nav-item-right {
  margin-left: auto; /* 这会将项目推到最右边 */
}

垂直导航栏

对于垂直导航栏，<a> 元素的基本样式（如 display: block）通常就足够了。如果需要更复杂的对齐或排序，也可以使用带有 flex-direction: column; 的 Flexbox。

.vertical-nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px; /* 为垂直导航栏设置宽度 */
  background-color: #f1f1f1;
}

.vertical-nav-list .nav-item a {
  display: block; /* 使整个链接区域可点击并允许内边距 */
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.vertical-nav-list .nav-item a:hover {
  background-color: #555;
  color: white;
}

.vertical-nav-list .nav-item.active a {
    background-color: #04AA6D; /* 活动/当前链接样式 */
    color: white;
}

为什么 Flexbox 优于旧方法（Floats/Inline-block）？

• 更简单的对齐：使用 Flexbox（align-items）实现项目的垂直对齐非常简单。
• 灵活的尺寸：项目可以更智能地增长和收缩。
• 排序：可以通过更改视觉顺序而无需更改 HTML 源顺序（order 属性）。
• 更少的技巧性：避免了清除浮动或处理 inline-block 的空白间隙等问题。

提示：对于完全响应式的导航，将 Flexbox 与 Media Queries 结合使用，以便在较小的屏幕上更改布局（例如，从水平布局变为垂直布局或显示“汉堡菜单”）。