PhpBB Lab Académie

Appliquer display: flex à la liste des liens Accueil, À propos et Contact, distinguer le conteneur de ses enfants directs et préserver le menu HTML.

Le composant que nous allons améliorer

Les trois pages possèdent le même nav, contenant un ul, trois li et les liens Accueil, À propos et Contact. Nous allons organiser cette liste avec Flexbox.

Flexbox est un système de disposition principalement organisé selon un axe. Pour notre groupe de liens, il permet de régler la présentation depuis leur parent plutôt que de positionner chaque lien manuellement.

1. Ajouter la classe à la bonne balise

Dans les trois pages, remplacez uniquement l’ouverture du ul à l’intérieur de nav par :

<ul class="navigation-principale">

Ne mettez pas la classe sur la liste Ce que j’ai appris. Les destinations restent index.html, apropos.html et contact.html, dans cet ordre. Vous ne créez pas un deuxième menu.

2. Comprendre display: flex

La propriété display définit notamment le modèle de mise en page utilisé par un élément. Avec flex, cet élément devient un conteneur flex pour ses enfants directs.

Ajoutez dans styles.css :

.navigation-principale {
    display: flex;
}

Le conteneur est donc le ul. Ses éléments flexibles sont les trois li, pas directement les liens a : chaque a est à l’intérieur de son li. Flexbox ne transforme pas tous les descendants du menu en éléments flexibles de ce même conteneur.

3. Le comportement initial en ligne

La direction par défaut de Flexbox est row. Dans notre document français, avec son mode d’écriture habituel, les éléments suivent une ligne de gauche à droite. La propriété qui permet de choisir cette direction s’appelle flex-direction ; nous la modifierons plus tard.

Le mot row ne signifie pas « toujours horizontal dans tous les modes d’écriture ». Pour l’exercice présent, il correspond bien à la rangée de nos trois liens.

La liste garde encore ses espacements et puces de navigateur. C’est normal à cette étape : nous ne les avons pas encore réglés.

4. Le parent n’est pas le lien

Écrire display: flex; sur chaque a organiserait le contenu de chaque lien, pas les trois li entre eux. Pour placer les éléments de la liste, nous devons agir sur la liste.

Si le menu ne se dispose pas comme prévu, vérifiez d’abord la classe du ul et sa règle. Ne compensez pas en ajoutant de grandes marges sur les liens.

5. Conserver la navigation native

nav reste une zone de navigation ; ul reste une liste ; les a avec href restent des liens activables au clavier. Nous n’ajoutons ni boutons factices ni gestion JavaScript du menu.

Testez Accueil, À propos et Contact dans les deux sens. La mise en page ne doit pas changer leur ordre de lecture. La prochaine leçon espacera cette même liste et expliquera les deux axes.

Référence technique, pour approfondir

W3C — Modèle de mise en page Flexbox

Le nav des trois pages contient désormais :

<nav>
    <ul class="navigation-principale">
        <li><a href="index.html">Accueil</a></li>
        <li><a href="apropos.html">À propos</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Son contenu vient du cours HTML. Seule la classe du ul a été ajoutée.

Étape 1

Dans chaque page, ajoutez navigation-principale au ul du nav, pas aux listes du contenu.

Étape 2

Ajoutez la règle .navigation-principale { display: flex; } à styles.css.

Étape 3

Enregistrez puis testez la navigation entre les trois pages. Le nom et l’ordre des liens restent identiques.

Étape 4

Expliquez pourquoi les li sont les éléments flexibles et pourquoi les a ne sont pas les enfants directs du conteneur.

Flexbox est activé sur le parent qui doit organiser ses enfants directs. Ici : le ul est le conteneur, les li sont les éléments flexibles. Le menu reste celui du cours HTML.