PhpBB Lab Académie

Lire les axes de Flexbox, espacer la navigation avec gap et distinguer répartition du groupe et alignement de ses éléments.

Partir de la liste déjà transformée

Le ul de navigation est maintenant flex. Nous allons préciser son espacement et son alignement, dans styles.css seulement. Les trois liens et leurs destinations ne changent pas.

1. Les deux axes

L’axe principal suit la direction choisie par flex-direction. Avec row dans notre page, il suit la rangée. L’axe transversal, aussi appelé axe secondaire, lui est perpendiculaire.

justify-content répartit les éléments et l’espace libre sur l’axe principal. align-items règle l’alignement des éléments sur l’axe transversal. Mémorisez ces axes, pas « toujours horizontal » et « toujours vertical » : ils changent lorsque la direction change.

2. Espacer les éléments avec gap

Ajoutez gap: 1rem; à .navigation-principale. gap crée des intervalles entre les éléments ; il ne met pas de padding dans les liens et ne crée pas automatiquement un espace autour du conteneur.

Nous n’avons pas besoin d’ajouter une marge à chaque li puis de retirer celle du dernier. Le conteneur gère directement la séparation.

3. Tester la répartition du groupe

Ajoutez justify-content: center; temporairement. Si le menu dispose d’espace libre, le groupe se centre sur l’axe principal. Avec flex-start, il revient au début ; avec space-between, l’espace libre est distribué entre les éléments.

Si aucun espace libre n’existe, le changement peut être peu visible : la propriété ne fabrique pas de largeur disponible. Remettez justify-content: flex-start; pour le menu du projet.

Ces valeurs déplacent les éléments, pas le texte à l’intérieur de chaque lien. text-align, appris avec le tableau, répond à cet autre besoin.

4. Choisir l’alignement transversal

Ajoutez align-items: center;. Dans notre rangée, les li sont centrés selon l’axe transversal. flex-start les alignerait au début de cet axe. Le comportement d’étirement, stretch, est surtout visible lorsque les tailles des éléments peuvent différer.

Nos trois liens ont des hauteurs proches : center peut donc produire peu de différence. Ce n’est pas une erreur ; ne fixez pas une hauteur artificielle au menu uniquement pour accentuer l’essai.

5. Retirer la présentation de liste uniquement dans ce menu

Ajoutez list-style: none; pour ne pas dessiner de puces, puis margin: 0; et padding: 0; pour neutraliser les espacements par défaut du ul. Gardez réellement les éléments nav, ul et li : nous modifions leur présentation, pas leur structure.

La liste Ce que j’ai appris ne porte pas navigation-principale ; elle garde ses puces. Cette portée limitée est précisément l’intérêt d’une classe.

La solution rassemble les déclarations. La prochaine leçon autorisera le menu à revenir à la ligne quand l’espace manque.

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

Le padding remis à zéro est celui du ul de navigation. Il n’annule ni le padding de body ni celui des notes de progression.

Étape 1

Ajoutez gap: 1rem; dans la règle existante .navigation-principale.

Étape 2

Essayez center puis space-between pour justify-content sur une fenêtre large. Remettez flex-start.

Étape 3

Ajoutez align-items: center;. Expliquez son axe d’action même si le changement est discret.

Étape 4

Ajoutez list-style: none;, margin: 0; et padding: 0; dans cette règle seulement.

Étape 5

Vérifiez que le menu n’affiche plus de puces tandis que Ce que j’ai appris conserve sa vraie liste et sa présentation.

Gap sépare les éléments du menu. Justify-content travaille sur l’axe principal, align-items sur l’axe transversal. Les puces ont été retirées uniquement de la navigation, pas des listes de contenu.