html - 我怎么能把标志放在导航栏的中心，每边的菜单项数量不均匀？

Question

我正在编写我为练习找到的设计，并试图让 Logo 像运球链接一样位于导航栏的中心。

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

左边有4个元素，右边只有两个。我最初让它们都向左浮动但无法弄清楚，所以我尝试了 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;
}