FlexBox Ausrichten Artikel

Question

Ich versuche, die 6., 7., 8., 9. Elemente im Flexbehälter diese auszurichten erhalten:

[1. 2. 3. 4. 5. .......... ... 6. 7. 8. 9h].

Ich habe mit Marge-rechts versucht: Auto, aber es funktioniert nicht für eine Gruppe von Elementen.

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

Mein vollständiger Code ist hier: https://codepen.io/mario1982/pen/wrELoB

Answer 1

Ja, es war einfach, sollte der sechste Punkt "margin-left: auto" bekommen, und das ist alles.

Answer 2

Sie können die Navigation in zwei Teile aufteilen und dem Container flexbox Eigenschaften hinzufügen, um sie voneinander zu trennen. Wenn Sie in Zukunft Elemente zum Menü hinzufügen möchten, müssen Sie sich keine Gedanken über nth-child machen, die Probleme verursachen.

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