flexbox articles

Question

alignement Je suis en train d'aligner les 6e, 7e, 8e, 9e articles dans le conteneur flexible pour obtenir ceci:

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

J'essayais avec margin-right: auto mais ça ne marche pas pour un groupe d'items.

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

Mon code complet est ici: https://codepen.io/mario1982/pen/wrELoB

Answer 1

Ouais il était facile, le 6e élément doit obtenir "margin-left: auto", et voilà tout.

Answer 2

Vous pouvez diviser la navigation en deux parties et ajouter les propriétés flexbox sur le conteneur pour les séparer. Si vous souhaitez ajouter des éléments au menu dans le futur, vous ne devrez pas vous inquiéter de nth-child causant des problèmes.

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