如何使Flex容器内的菜单项始终居中？布局偏移问题求助

问题描述 #

我无法实现让菜单项始终保持居中的效果。当前场景下，显示“Name Surname”的logo容器宽度不足以容纳其内容，导致菜单整体向右偏移。我已为导航容器设置了flex: 1 0 auto属性以允许其扩展，但问题仍未解决。

现有代码 #

CSS #

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 950px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

.list {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

HTML #

<div class="container">
  <a class="logo" href="/">
    <h1>Name Surname</h1>
  </a>
  <nav class="nav">
    <ul class="list">
      <li class="item">
        <a class="link" href="#about">About me</a>
      </li>
      <li class="item">
        <a class="link" href="#skills">Skills</a>
      </li>
      <li class="item">
        <a class="link" href="#education">Education</a>
      </li>
      <li class="item">
        <a class="link" href="#projects">Projects</a>
      </li>
      <li class="item">
        <a class="link" href="#cv">CV</a>
      </li>
      <li class="item">
        <a class="link" href="#somelink">Some Link</a>
      </li>
    </ul>
  </nav>
  <div class="settings">
    <button>TM</button>
    <button>LS</button>
  </div>
</div>

当前布局效果 #

解决方法 #

问题根源在于justify-content: space-between会让三个子元素按剩余空间分配位置，导航的“居中”只是相对于它自身的可用区域，而非整个容器的中线。要让菜单真正居中，需要让logo和设置按钮容器占据等量的空间，强制导航处于正中间。

修改后的CSS代码：

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 950px;
  display: flex;
  align-items: center;
  /* 移除justify-content: space-between，改为通过flex分配空间 */
}

/* 让logo和settings各占容器左右两侧的等量空间 */
.logo, .settings {
  flex: 1;
}

.logo {
  text-align: left; /* 保持logo左对齐 */
}

.settings {
  text-align: right; /* 保持设置按钮右对齐 */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 移除flex:1，因为两侧元素已占据空间 */
}

.list {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 0;
  margin: 0;
}

原理说明 #

• 给.logo和.settings设置flex:1，让它们各自平分容器的剩余空间，无论自身内容宽度如何，两侧的占位空间始终相等。
• 中间的.nav不需要再设置flex:1，自然会被挤到容器的正中间，实现真正的居中效果。

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