html - CSS flexbox 的基本对齐问题

Question

这个问题已经有答案了:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties? (6 个回答)

已关闭 3 年前。

我正在为一家虚构的公司创建我的第一个示例网页。我正在尝试使用flexbox来显示我的<nav>中的三个内部链接元素在横幅上均匀分布。我通过更改背景颜色验证了导航元素跨越整个页面，因此我对一些我确信对于有经验的人来说相当明显的事情摇了摇头。

nav {
  display: flex;
}

.nav-element {
  display: flex;
  justify-content: space-around;
  margin: 0 1rem;
}

<header>
  <nav>
    <a class="nav-element" href="#">Mission Statement</a>
    <a class="nav-element" href="#">Produce</a>
    <a class="nav-element" href="#">Helping Hands</a>
  </nav>
  <h1 class="title">portlandia farms</h1>
</header>

Answer 1

您只需要在导航容器上设置 flex 显示属性和 justify-content ，而不是链接本身:

nav {
  display: flex;
  justify-content: space-around;
}

.nav-element {
  margin: 0 1rem;
}

<header>
  <nav>
    <a class="nav-element" href="#">Mission Statement</a>
    <a class="nav-element" href="#">Produce</a>
    <a class="nav-element" href="#">Helping Hands</a>
  </nav>
  <h1 class="title">portlandia farms</h1>
</header>