html - 如何将 Logo 置于导航栏中居中，而两侧的菜单项数量不均匀？

Question

我正在编写一个用于练习的设计，并试图将 Logo 放在导航栏的中心，就像在运球链接中一样。

https://dribbble.com/shots/4424634-MIFESTIVAL-Home-Page/attachments/1005722

左边有 4 项，右边只有 2 项。我本来让它们都向左浮动，想不出来，所以我尝试了flexbox，因为我发现了这个提示:https://stackoverflow.com/a/21862333/7723283

只有当导航中的元素数量均匀时，这才有效。我还想知道我是否可以将所有这些元素作为正常导航而不是按钮或其他东西。这个CSS与上面的链接基本相同，所以我的导航项都被平等地定位。但我需要中间的标志。我觉得用flexbox可以轻松完成一些事情，但这是我第一次使用它。

nav{
  display:flex;
  width:100%;
  height:20%;
  background:#eee;
  align-items:center;
  justify-content:center;
}

nav a {
  text-decoration:none;
  color:black;
  margin: 0 30px;
}

#logo{
  width: 200px;
  height:100%;
  background:rgb(126, 232, 163);
}

<nav>
   <a href="#">Menu icon</a></li>
   <a href="#">Search icon</a></li>
   <a href="plan.html">Plan Your Trip</a></li>
   <a href="experience.html">Experience</a></li>
   <a href="index.html" id="logo">mifestival</a></li>
   <a href="tickets.html">Tickets</a></li>
   <a href="line-up.html">Line-Up</a></li>
</nav>

Answer 1

这是一个非常简单的重组，可以帮助您入门:

我们会将菜单 block 分为三个不同的部分(左侧、中间/ Logo 、右侧)

<nav>
    <div class="leftSide">
        <a href="#">Menu icon</a>
        <a href="#">Search icon</a>
        <a href="plan.html">Plan Your Trip</a>
        <a href="experience.html">Experience</a>
    </div>
    <div class="logo">
        <a href="index.html" id="logo">mifestival</a>
    </div>
    <div class="rightSide">
        <a href="tickets.html">Tickets</a>
        <a href="line-up.html">Line-Up</a>
    </div>
</nav>

对于 CSS，我们将添加以下内容:

.leftSide {
    width: calc(50% - 100px);
    display: flex;
    justify-content: center;
}
.rightSide {
    width: calc(50% - 100px);
    display: flex;
    justify-content: center;
}