Astro中使用SCSS实现导航栏链接居中而非Logo的问题排查

我想要实现导航栏组件的链接居中显示，而非Logo居中，但当前SCSS代码未能达成效果。

我的SCSS代码 #

.navbar {
  background-color: black;
  display: flex;
  align-items: center;
  padding: 1rem;
}

.name {
  font-family: "Marcellus", sans-serif;
  font-size: 2rem;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  .item {
    margin-left: 1rem;
  }

  .link {
    color: white;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

我的Astro代码 #

---
import './Navbar.scss'

export interface Props {
  links: {
    title: string;
    href: string;
  }[]
}

const { links } = Astro.props;
---

<nav class="navbar">
  <div class="name">
    <a class="text-gradient" href="/">MysticalLira</a>
  </div>
  <div class="center">
    <ul class="links">
      {links.map(link => (
        <li class="item">
          <a class="link" href={link.href}>{link.title}</a>
        </li>
      ))}
    </ul>
  </div>
</nav>

问题原因与解决方法 #

问题核心是.navbar的flex布局未合理分配空间，.center容器仅占据自身内容宽度，无法实现全局居中。

修改后的SCSS代码 #

.navbar {
  background-color: black;
  display: flex;
  align-items: center;
  padding: 1rem;
  // 新增：让导航栏占满宽度，分配空间
  width: 100%;
  justify-content: space-between;
}

.name {
  font-family: "Marcellus", sans-serif;
  font-size: 2rem;
  // 新增：固定Logo宽度，避免挤压链接容器
  flex-shrink: 0;
  width: 150px; // 可根据实际Logo尺寸调整
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  // 新增：填充导航栏剩余空间，确保居中生效
  flex-grow: 1;
}

.links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  .item {
    margin-left: 1rem;
  }

  .link {
    color: white;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

关键修改说明 #

• width: 100%：确保导航栏占满父容器宽度，为空间分配提供基础
• justify-content: space-between：让Logo容器和链接容器分别靠向左右两端，中间留出空白区域
• flex-grow: 1：让.center容器填充中间的全部空白空间，此时内部的justify-content: center才能让链接在导航栏的水平中心位置显示
• flex-shrink: 0 + 固定宽度：防止Logo被挤压变形，保证布局稳定性

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