html - 将导航项(或 Logo )置于导航栏中间以响应居中

Question

我似乎无法找到一种优雅且响应迅速的方式来自动将“ Logo ”定位在导航栏的中心考虑更多元素可以添加或删除，并且它比固定边距数字更有意义(如我知道我可以那样做)。

设计很简单(内置在 Gatsby 中):

nav {
  display: flex;
  margin: 0 auto;
  max-width: 600px;
}

a {
  margin-right: 20px;
}

.logo {
  margin: 0 auto;
}

<nav>
  <a>Item 1</a>
  <a>Item 2</a>
  <a>Item 3</a>
  <a class="logo">Logo</a>
  <a>Item 4</a>
</nav>

我不确定如何解决这个问题，如前所述，通过媒体查询的组合固定边距数字(即左 10 像素，右 22 像素)。

谁有解决办法？

Answer 1

一个解决方案可能是将您的导航分成 3 个不同的部分，左、中和右。然后使用 flex box 来定位它们，但给它们一个页面的 3rd 的最小值和最大值。此外，您需要将 Logo 居中并右对齐右列。

可能更可靠的解决方案是使用 CSS 网格。将页面分成 3 列的想法相同，但您可以将 3 列宽度设置为 1fr，而不是将最小和最大宽度设置为 33.333333...% - 我认为这是更优雅的解决方案。我也提供了一个例子。

nav {
  display: flex;
  justify-content: flex-start;
}

nav>div {
  max-width: 33.3333%;
  min-width: 33.3333%;
}

.logo {
  text-align: center;
}

.right {
  text-align: right;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-left {
  grid-column: 1 / 2;
  background-color: darkseagreen;
}

.grid-center {
  grid-column: 2 / 3;
  background-color: coral;
  text-align: center;
}

.grid-right {
  grid-column: 3 / 4;
  background-color: steelblue;
  text-align: right;
}

<h2>Flex example</h2>
<nav>
  <div>
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </div>
  <div class="logo">
    <a>Logo</a>
  </div>
  <div class="right">
    <a>Item 4</a>
  </div>
</nav>
<h2>Grid example</h2>
<div class="grid">
  <div class="grid-left">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
    <a>Item 4</a>
    <a>Item 5</a>
  </div>
  <div class="grid-center">
    <a class="logo">Logo</a>
  </div>
  <div class="grid-right">
    <a>Item 4</a>
  </div>
</div>