Ajuster l’alignement et la taille des éléments

Une navigation peut sembler bien alignée tant que ses liens ont des libellés courts et que la fenêtre est large. Dès qu’un lien devient plus long ou que l’espace disponible diminue, les éléments peuvent se tasser, s’étirer ou perdre leur alignement vertical. Vous allez régler ces comportements avec les propriétés d’alignement et de dimensionnement des éléments Flexbox.

Vous avez déjà créé un conteneur Flexbox et réparti ses éléments. Ici, vous intervenez sur les éléments flex eux-mêmes : leur alignement sur l’axe transversal, leur capacité à prendre de l’espace supplémentaire et leur comportement lorsque l’espace manque. L’exemple reste dans le projet de l’atelier de jardinage et cible uniquement sa navigation.

Aligner les liens sur l’axe transversal

La propriété `align-items` règle l’alignement des éléments flex sur l’axe transversal du conteneur. Avec `align-items: center`, le centre de chaque élément est placé au même niveau, ce qui est utile lorsque la barre de navigation a une hauteur définie ou que ses éléments n’ont pas exactement la même hauteur. Cette propriété s’applique au conteneur, pas individuellement à chaque lien.

Dans le projet, la liste des liens est le conteneur flex. Le logo et la navigation occupent deux parties distinctes de l’en-tête : la navigation conserve un espacement entre ses liens, tandis que `align-items` aligne verticalement les éléments de la liste. Le code ci-dessous fournit un exemple complet de structure et de feuille de styles pour cette zone.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier de jardinage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <a class="logo" href="#accueil">Atelier jardin</a>
        <nav aria-label="Navigation principale">
            <ul class="navigation">
                <li><a href="#horaires">Horaires</a></li>
                <li><a href="#conseils">Conseils pratiques</a></li>
                <li><a href="#contact">Nous contacter</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

:root {
    --couleur-fond: #f3f6ef;
    --couleur-texte: #243126;
    --couleur-accent: #356b43;
    --espace-petit: 0.75rem;
    --espace-moyen: 1.5rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--couleur-texte);
    font-family: sans-serif;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-moyen);
    padding: var(--espace-moyen);
    background-color: var(--couleur-fond);
}

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

.logo {
    flex: 0 0 auto;
    font-weight: bold;
}

.navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espace-petit);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation a {
    display: block;
    padding: var(--espace-petit);
    color: var(--couleur-accent);
}

Dans cet exemple, `align-items: center` sur `.site-header` aligne le logo et la navigation sur l’axe transversal. La même propriété sur `.navigation` centre les liens dans leurs éléments, notamment si leurs zones cliquables ont des hauteurs différentes. `justify-content` garde son rôle de répartition sur l’axe principal ; il ne remplace donc pas `align-items`.

Contrôler la taille des éléments flex

Chaque élément flex peut grandir, rétrécir et partir d’une taille de base. `flex-grow` détermine comment il prend sa part de l’espace restant ; sa valeur par défaut est `0`, donc l’élément ne grandit pas automatiquement. `flex-shrink` détermine sa participation à la réduction quand l’espace manque ; sa valeur par défaut est `1`. Enfin, `flex-basis` indique la taille de départ sur l’axe principal avant ces ajustements.

La propriété raccourcie `flex` regroupe ces trois valeurs dans cet ordre : croissance, réduction, base. Ainsi, `flex: 0 1 10rem` signifie que l’élément ne grandit pas, peut rétrécir et part d’une base de `10rem`. Dans l’exemple, le logo utilise `flex: 0 0 auto` : il ne prend pas l’espace restant et ne rétrécit pas, ce qui évite de comprimer son texte pour donner de la place aux liens.

Pour tester le dimensionnement, vous pouvez attribuer une base identique aux éléments de navigation et les autoriser à grandir. Ce réglage est adapté si vous souhaitez des zones de lien de largeur régulière ; il n’est pas nécessaire pour une navigation où chaque lien doit rester aussi large que son libellé. Évitez de figer une largeur qui ne tient pas compte du texte réel : un intitulé plus long peut alors manquer de place.

.navigation li {
    flex: 1 1 8rem;
}

Chaque élément de liste part d’une base de 8rem, peut grandir pour partager l’espace restant et peut rétrécir si la place disponible diminue.

Avec cette règle, les éléments de la navigation peuvent se répartir plus régulièrement sur une barre assez large. Si vous préférez que leur largeur suive le contenu, supprimez la règle : la valeur initiale de croissance ne leur attribue pas d’espace supplémentaire. Comparez les deux rendus en réduisant progressivement la largeur du navigateur ; vérifiez que les libellés restent lisibles et que l’alignement vertical demeure cohérent.

À retenir

• Utilisez `align-items` sur le conteneur pour aligner ses éléments sur l’axe transversal.
• `flex-grow` règle la prise d’espace restant ; `flex-shrink` règle la réduction lorsque l’espace manque.
• `flex-basis` définit la taille de départ des éléments sur l’axe principal.
• La propriété `flex` rassemble croissance, réduction et taille de base ; choisissez ses valeurs selon le comportement attendu.
• Testez la navigation avec des libellés de longueurs différentes et plusieurs largeurs de fenêtre.

Dans la prochaine leçon, vous comparerez les usages de Flexbox et de Grid avant de structurer les zones de contenu de la page.