使用Flexbox构建高性能响应式头部导航：优化移动端布局与汉堡菜单兼容性

<div id="menu-bar" class="fas fa-bars">
  <div class="container-ring">
      <div class="ring"></div>
      <div class="ring"></div>
      <div class="ring"></div>
      <a href="#" class="logo"><span>T</span>ravel</a>
  </div>

  <nav class="navbar">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="Tour.html">Tour</a>
    <a href="Blog.html">Blog</a>
    <a href="contact.html">Contact</a>
  </nav>

  <form action="#" class="search-bar-container">
      <div class="icons">
        <i class="fas fa-search" id="search-btn"></i>
        <i class="fas fa-user" id="login-btn"></i>
      </div>
      <input type="search" id="search-bar" placeholder="Search here..." >
      <label for="search-bar" class=" fas fa-search"></label>
  </form>
</div>

/* 基础 Flexbox 布局 */
#menu-bar {
  display: flex;
  flex-direction: row; /* 桌面端默认横向排列 */
  flex-wrap: wrap; /* 允许元素换行，防止溢出 */
  column-gap: 10px; /* 列间距 */
  align-items: center; /* 垂直居中对齐所有子项 */
  padding: 1rem; /* 增加内边距 */
  background: #333; /* 示例背景色 */
  color: #fff; /* 示例文字颜色 */
}

/* 内部组件布局与对齐 */
.container-ring {
  display: flex;
  align-items: center; /* 内部元素垂直居中 */
}

.navbar {
  display: flex;
  flex-grow: 2; /* 导航栏占据更多可用空间 */
  justify-content: flex-start; /* 导航链接左对齐 */
  align-items: center; /* 内部元素垂直居中 */
}

.navbar a {
  display: block;
  border-radius:0.5rem;
  padding:0.5rem;
  margin:0.5rem 0.1rem;
  text-decoration: none;
  color: #fff;
  background:crimson;
  white-space: nowrap; /* 防止导航链接换行 */
}

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

.search-bar-container {
  display: flex;
  align-items: center; /* 内部元素垂直居中 */
  margin-left: auto; /* 将搜索容器推到最右边 */
}

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

.search-bar-container .icons i {
    cursor: pointer;
    font-size: 1.7rem;
    margin-left: 0.5rem;
    color: #fff;
}

/* 移动端适配 */
@media (max-width: 480px) {
  #menu-bar {
    flex-direction: column; /* 移动端垂直堆叠 */
    align-items: stretch; /* 子项横向拉伸填充父容器 */
    row-gap: 15px; /* 行间距 */
  }

  .container-ring,
  .navbar,
  .search-bar-container {
    flex-direction: column; /* 内部元素也垂直堆叠 */
    justify-content: center; /* 内部元素水平居中 */
    width: 100%; /* 占据父容器全部宽度 */
  }

  .navbar a {
      margin: 0.5rem 0; /* 调整移动端链接的上下边距 */
      text-align: center; /* 文本居中 */
  }

  .search-bar-container input#search-bar {
      width: 80%; /* 移动端搜索框宽度 */
      margin-top: 0.5rem;
  }
}