Navigation segmentée

Exigences

Un motif courant de navigation consiste à éloigner un élément des autres. On peut utiliser flexbox pour obtenir ce résultat, sans avoir besoin de créer deux conteneurs flex distincts.

Recette

Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour modifier l'exemple dans le MDN Playground :

<nav>
  <ul class="main-nav">
    <li><a href="">À propos</a></li>
    <li><a href="">Produits</a></li>
    <li><a href="">Notre équipe</a></li>
    <li class="push"><a href="">Contact</a></li>
  </ul>
</nav>

.main-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 1.2em sans-serif;

  display: flex;
}

.main-nav a {
  padding: 0.5em 1em;
  display: block;
}

.push {
  margin-left: auto;
}

Choix effectués

Ce motif combine les marges automatiques avec flexbox pour séparer les éléments.

Une marge automatique absorbe tout l'espace disponible dans la direction où elle est appliquée. C'est ainsi que le centrage d'un bloc avec des marges automatiques fonctionne — vous avez une marge de chaque côté du bloc qui tente de prendre tout l'espace, ce qui pousse le bloc au centre.

Dans ce cas, la marge automatique à gauche prend tout l'espace disponible et pousse l'élément vers la droite. Vous pouvez appliquer la classe push à n'importe quel élément de la liste.

Voir aussi

• Mise en page flexible CSS
• La propriété display
• La propriété margin