フレキシボックス合わせるアイテム

Question

はこれを取得：

[1番目2番目3番目4番目5番目を.......... ... 6th 7th 8th 9h]。

私はmargin-right：autoで試していましたが、項目のグループでは機能しません。

.upper_nav ul { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    list-style-type: none; 
 
} 
 

 
.upper_nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 0.6em; 
 
    font-size: 0.8em; 
 
    color: #4d4d4d; 
 
}

<nav class="upper_nav"> 
 
    <ul> 
 
    <li><a href="#Clients.html">Individual Clients</a></li> 
 
    <li><a href="#Companies">Companies</a></li> 
 
    <li><a href="#Corporations.html">Corporations</a></li> 
 
    <li><a href="#VIP.html">VIP</a></li> 
 
    <li><a href="#Private Banking.html">Private Banking</a></li> 
 

 
    <li><a href="#EN">EN</a></li> 
 
    <li><a href="#Order via Internet">Order via Internet</a></li> 
 
    <li><a href="#Contact">Contact</a></li> 
 
    <li><a href="#Sign in">Sign in</a></li> 
 
    </ul> 
 
</nav>

私の完全なコードはここにある：https://codepen.io/mario1982/pen/wrELoB

Answer 1

うん、それは簡単だった、第六項目は、 "余白左：auto" を取得する必要があり、それがすべてです。

Answer 2

ナビゲーションを2つの部分に分割し、コンテナにflexboxプロパティを追加して、それらを区切ることができます。将来メニューに項目を追加したい場合は、nth-childが問題を引き起こす心配はありません。

.upper_nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.upper_nav ul { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    list-style-type: none; 
 
} 
 

 
.upper_nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 0.6em; 
 
    font-size: 0.8em; 
 
    color: #4d4d4d; 
 
}

<nav class="upper_nav"> 
 
    <ul> 
 
    <li><a href="#Clients.html">Individual Clients</a></li> 
 
    <li><a href="#Companies">Companies</a></li> 
 
    <li><a href="#Corporations.html">Corporations</a></li> 
 
    <li><a href="#VIP.html">VIP</a></li> 
 
    <li><a href="#Private Banking.html">Private Banking</a></li> 
 
    </ul> 
 
    <ul> 
 
    <li><a href="#EN">EN</a></li> 
 
    <li><a href="#Order via Internet">Order via Internet</a></li> 
 
    <li><a href="#Contact">Contact</a></li> 
 
    <li><a href="#Sign in">Sign in</a></li> 
 
    </ul> 
 
</nav>