构建高性能响应式头部导航：Flexbox布局实战指南

实现桌面端布局：横向排列与空间分配

在桌面端，我们通常希望头部导航元素能够横向排列，并且在空间上进行合理的分配。通过为 #menu-bar 容器应用 Flexbox 属性，我们可以轻松实现这一目标。

1. 激活 Flex 布局并设置主轴方向： 为 #menu-bar 设置 display: flex 和 flex-direction: row（默认值）。
2. 垂直居中对齐： 使用 align-items: center 使所有子元素在交叉轴（垂直方向）上居中对齐。
3. 空间分配： 为 .navbar 应用 flex-grow: 2，使其在可用空间中占据更多的份额，从而将Logo和搜索/图标区域推向两侧，形成更平衡的布局。
4. 内部 Flex 布局： 对于 .container-ring 和 .search-bar-container 等内部包含多个元素的组件，也应用 display: flex 来管理其内部元素的布局。

桌面端 CSS 代码示例：

/* 主容器 */
#menu-bar {
  display: flex; /* 激活Flex布局 */
  flex-direction: row; /* 子元素横向排列 */
  flex-wrap: wrap; /* 允许在空间不足时换行，通常在桌面端不会触发 */
  column-gap: 10px; /* 定义列间距 */
  align-items: center; /* 交叉轴（垂直方向）居中对齐 */
  /* 其他头部样式，如背景色、padding、高度等 */
  background-color: #333; /* 示例背景色 */
  padding: 1rem 2rem;
  color: #fff;
}

/* Logo 区域 */
.container-ring {
  display: flex; /* 内部元素Flex布局 */
  align-items: center; /* 垂直居中 */
  /* Logo特定样式 */
}

.logo {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
}

/* 导航链接区域 */
.navbar {
  display: flex; /* 内部链接Flex布局 */
  flex-grow: 2; /* 占据更多可用空间 */
  /* 导航链接容器样式 */
}

.navbar a {
  display: block; /* 链接块级显示 */
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0.5rem; /* 调整链接间距 */
  text-decoration: none;
  color: #fff;
  background: crimson;
  transition: background-color 0.3s ease;
}

.navbar a:hover {
  background-color: rgba(232, 58, 107, 0.7);
}

/* 搜索框和图标区域 */
.search-bar-container {
  display: flex; /* 内部元素Flex布局 */
  align-items: center; /* 垂直居中 */
  /* 搜索框容器样式 */
}

.search-bar-container .icons {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.search-bar-container .icons i {
    font-size: 1.2rem;
    margin-left: 10px;
    cursor: pointer;
}

.search-bar-container input#search-bar {
  padding: 0.5rem;
  border-radius: 0.3rem;
  border: none;
  margin-right: 5px;
}

移动端适配：媒体查询与垂直堆叠

当屏幕尺寸缩小到移动设备范围时，横向排列的导航元素可能会变得拥挤。此时，我们需要