Flexbox导航栏，包含两侧的菜单项和中心徽标

Question

我有一个使用flexbox构建的导航栏，想要3个部分。左侧的链接，右侧的链接以及中心的徽标。但是，如果我尝试使用flexbox，如果左侧链接的内容与右侧链接的内容不同，我的徽标最终会偏移。那我该如何将我的徽标居中？

这是HTML：

<nav>
<div class="logo">
    <img src="img/logo.svg"/>
</div>
<ul>
    <li><a href="/about.html" class="selected">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/about.html">Work</a></li>
    <li><a href="/about.html">Contact</a></li>
</ul>
</nav>

这是CSS：

nav {
    display: flex;
    text-align: center;
}

nav > .logo {
    flex-grow: 1;
}

nav > .logo > img {
    height: 1rem;
}

nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li {
    margin: 0 1rem;
}

Answer 1

＆＃13;

＆＃13;

* {
  margin: 0; padding: 0; }

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
  width: 200px; }

nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav > ul > li {
    margin: 0 1rem;
}

＆＃13;

<nav>
  <ul>
      <li><a href="/about.html" class="selected">Home</a></li>
  </ul>
  <div class="logo">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png"/>
  </div>
  <ul>
      <li><a href="/about.html" class="selected">Home</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

您不需要使用flex-grow：1 in logo。您可以指定徽标的宽度并使用justify-content：space-between;和align-items：center;

align-items: center使您的元素垂直对齐，而justify-content: space-between在自由空间中平均分隔您的元素。