両方のメニュー項目を持つFlexboxナビゲーションバー

Question

フレックスボックスを使用して作成されたナビゲーションバーがあり、3つのセクションが必要です。左のリンク、右のリンク、中央のロゴ。しかし、フレックスボックスを使用しようとすると、左側のリンクの内容と右側のリンクの内容が異なる場合、私のロゴはオフセットされてしまいます。どうすれば私のロゴを中央に置くことができますか？

これは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を使用することができます。アラインメントアイテム：center;

align-items: center要素を垂直に整列させます。一方、justify-content: space-betweenは空き領域で均等に要素を区切ります。