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

* { 
 
    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; 
 
}

<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>

您不需要在徽標中使用flex-grow：1。您可以指定徽標的寬度並使用justify-content：space-between;和align-items：center;

align-items: center使您的元素垂直對齊，而justify-content: space-between將您的元素在自由空間上分開。