FreeCodeCamp产品着陆页Header布局求助：Logo居左、导航栏右侧均匀分布

直接给你一套可行的flexbox实现方案，核心是通过两层flex容器分别控制整体布局和导航内部的链接分布：

HTML结构示例 #

<header id="header">
  <img src="your-logo-url" id="logo-img" alt="网站Logo">
  <nav id="navbar">
    <ul class="nav-links">
      <li><a href="#home" class="nav-link">首页</a></li>
      <li><a href="#products" class="nav-link">产品</a></li>
      <li><a href="#contact" class="nav-link">联系我们</a></li>
    </ul>
  </nav>
</header>

CSS核心样式 #

#header {
  display: flex;
  align-items: center; /* 垂直居中对齐Logo和导航 */
  justify-content: space-between; /* 把Logo和导航分别推到左右两端 */
  padding: 0 20px;
  height: 80px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#logo-img {
  height: 60px; /* 根据你的Logo尺寸调整 */
  width: auto;
}

#navbar .nav-links {
  display: flex;
  list-style: none; /* 去掉默认列表圆点 */
  padding: 0;
  margin: 0;
  width: 300px; /* 给导航容器一个固定宽度，确保链接均匀分布 */
  justify-content: space-between; /* 让链接之间间距均匀 */
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

关键要点说明 #

• 外层#header用justify-content: space-between直接分离Logo和导航容器，确保整体布局左Logo右导航
• 内层.nav-links通过固定宽度+justify-content: space-between实现链接的均匀分布，宽度可以根据链接数量和需求调整
• 记得清除列表默认的padding和margin，避免布局偏移
• 如果需要响应式适配，可在小屏幕下把#header改成flex-direction: column，让导航堆叠在Logo下方

内容的提问来源于stack exchange，提问作者Richard Hocking