Flexbox的对齐项目

Question

我试图对准6日，7日，8日，9日在Flex容器项目 得到这样的：

[二路1号4 3TH 5 .......... ... 6日7日8日9时]。

我尝试使用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

是的它很容易，第6项应该得到 “保证金左：汽车”，而这一切。

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