PhpBB Lab Académie

Utiliser flex-wrap: wrap sur la navigation réelle, vérifier l’effet de la largeur disponible et conserver l’ordre des liens avec le zoom.

Le menu doit s’adapter, pas perdre ses liens

Nos trois liens sont espacés et alignés. Nous allons autoriser leur retour à la ligne lorsque le menu n’a plus assez de place, sans inventer un menu mobile différent.

Vous ne modifiez que .navigation-principale dans styles.css. Les li et les a restent intacts dans les trois pages.

1. Comprendre nowrap

Le comportement initial de flex-wrap est nowrap : tous les éléments restent sur une seule ligne flex. Selon leurs contraintes, ils peuvent rétrécir ou déborder. Une ligne flex unique n’interdit pas au texte d’un élément de revenir lui-même à la ligne : il faut distinguer ces deux choses.

Pour notre navigation, nous préférons autoriser une nouvelle ligne de li si nécessaire.

2. Autoriser wrap

flex-wrap: wrap;

Ajoutez cette déclaration dans la règle existante. wrap autorise plusieurs lignes flex ; il ne les force pas lorsque tous les éléments tiennent déjà sur une rangée.

Avec gap: 1rem;, les intervalles continuent d’exister entre les éléments et, s’il y en a plusieurs, entre les lignes. Nous n’ajoutons donc pas une règle de marge différente selon le nombre de liens sur chaque ligne.

3. Observer le vrai comportement

Réduisez progressivement la fenêtre. Si les trois liens tiennent encore sur une seule ligne, continuez à réduire la largeur ou agrandissez le texte. Il n’y a pas une largeur universelle où exactement deux liens doivent rester côte à côte : cela dépend de leur longueur, de la police et des espaces.

Comparez temporairement nowrap et wrap, puis conservez wrap. Les liens Contact et À propos doivent rester présents, même lorsque la présentation change.

4. Préserver l’ordre de lecture

Le document garde Accueil, À propos, Contact. Le retour à la ligne ne modifie pas cette séquence. Nous n’utilisons ni inversion de direction ni propriété order pour fabriquer un ordre visuel différent.

Parcourez les liens au clavier. Leur ordre doit rester cohérent avec la lecture de la liste, sur les trois pages. À ce stade, gardez le contour de focus fourni par le navigateur ; une leçon ultérieure en précisera la présentation.

5. Ce que Flexbox a apporté au projet

Le chapitre a transformé un seul composant réel : le menu commun. Vous savez désormais où activer Flexbox, comment lire ses axes, espacer ses enfants et leur permettre de revenir à la ligne.

Nous n’avons pas besoin de forcer des largeurs égales avec flex-grow ou flex-basis pour ces trois liens. Ces propriétés existent, mais ne répondent pas au besoin de notre menu. Dans le prochain chapitre, Grid servira aux deux véritables notes de progression de l’accueil.

.navigation-principale {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

La nouvelle déclaration est flex-wrap: wrap;. Les autres propriétés conservent les choix de la leçon précédente.

Étape 1

Ajoutez flex-wrap: wrap; dans .navigation-principale sans créer de deuxième règle du même nom.

Étape 2

Testez une fenêtre étroite puis le zoom. Notez si les li restent sur une ligne ou passent sur plusieurs.

Étape 3

Remplacez temporairement wrap par nowrap, comparez, puis revenez à wrap.

Étape 4

Sur les trois pages, parcourez Accueil, À propos et Contact au clavier. Vérifiez qu’aucun lien n’a été masqué.

Étape 5

Expliquez pourquoi permettre plusieurs lignes est préférable à réduire fortement les caractères pour préserver une rangée.

Le retour à la ligne des éléments flexibles dépend de l’espace disponible. Flex-wrap: wrap rend notre navigation plus souple sans modifier son contenu. Le chapitre Flexbox est terminé sur ce composant réel.