Répartir les éléments de la navigation

Une navigation peut sembler simple, mais son espacement devient vite fragile si vous placez chaque lien avec des marges différentes. La barre peut aussi déborder lorsque les libellés sont longs ou que la fenêtre rétrécit. Vous allez répartir le logo et les liens avec Flexbox, puis permettre aux éléments de passer à la ligne lorsque l’espace manque.

Préparer le balisage de la navigation

Dans le projet de l’atelier de jardinage, la navigation comprend un logo textuel et quatre liens vers les zones de la page. Le conteneur principal réunit ces deux éléments ; la liste conserve les liens dans un groupe distinct. Vous réutilisez la feuille style.css et les variables de couleurs et d’espacement préparées précédemment.

<header class="entete">
    <nav class="navigation" aria-label="Navigation principale">
        <a class="logo" href="#accueil">Atelier Jardin</a>
        <ul class="navigation__liens">
            <li><a href="#horaires">Horaires</a></li>
            <li><a href="#conseils">Conseils</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

Répartir logo et liens avec justify-content

La propriété justify-content répartit l’espace disponible entre les éléments flex sur l’axe principal, défini par flex-direction. Avec la valeur space-between, le premier élément reste au début de la rangée et le dernier à sa fin ; l’espace restant est distribué entre eux. Pour cette navigation, le logo et la liste forment les deux éléments à séparer.

La liste est elle-même un conteneur flex. Vous pouvez y utiliser gap pour établir un espace régulier entre les liens, sans ajouter une marge à chaque élément. La même propriété, placée sur la navigation, définit un espace minimal entre le logo et la liste : elle reste utile lorsque space-between ne dispose que de peu d’espace à distribuer.

/* La barre répartit le logo et la liste de liens. */
.navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--espace-moyen);
    flex-wrap: wrap;
}

/* Les liens restent regroupés et espacés régulièrement. */
.navigation__liens {
    display: flex;
    gap: var(--espace-petit);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation a {
    color: var(--couleur-texte);
    text-decoration: none;
}

.navigation a:hover {
    text-decoration: underline;
}

Choisir une répartition et anticiper le manque d’espace

space-between convient lorsque vous voulez placer des groupes aux extrémités, comme le logo et les liens. Si vous préférez centrer l’ensemble, utilisez center ; pour laisser une marge comparable autour de chaque élément, space-around ou space-evenly peuvent être plus adaptés. Le résultat dépend toujours de l’espace réellement disponible : ces valeurs ne créent pas une distance fixe.

La propriété flex-wrap: wrap autorise les éléments à passer sur une nouvelle ligne si leur largeur cumulée dépasse celle du conteneur. Ici, la règle figure sur la navigation et sur la liste : le logo et la liste peuvent se séparer, et les liens peuvent se répartir sur plusieurs lignes. Sans cette propriété, la rangée cherche à rester sur une seule ligne et les éléments peuvent manquer d’espace.

Pour vérifier le comportement, réduisez progressivement la largeur de la fenêtre. À une largeur suffisante, le logo et les liens occupent la même rangée, avec l’espace libre entre les deux groupes. Quand la place manque, l’un des groupes ou certains liens passent sur une autre ligne ; vous n’avez pas ajouté de règle distincte pour chaque taille d’écran. Cette première adaptation reste fondée sur le contenu et l’espace disponible.

À retenir

• justify-content: space-between sépare le logo et la liste en distribuant l’espace libre sur l’axe principal.
• gap règle directement l’espace entre les éléments d’un même conteneur flex.
• flex-wrap: wrap permet aux groupes ou aux liens de passer à la ligne lorsque l’espace manque.
• Testez la navigation avec des libellés réels et à plusieurs largeurs de fenêtre.

Dans la prochaine leçon, vous ajusterez l’alignement et la taille des éléments de la navigation.