Comparer les usages de Flexbox et de Grid

Une navigation doit souvent aligner un logo et plusieurs liens, tandis que des conseils pratiques doivent former des rangées et des colonnes cohérentes. Utiliser le même outil pour ces deux problèmes peut rendre les règles difficiles à maintenir. Vous allez comparer Flexbox et Grid afin de choisir le modèle qui correspond à la structure à produire.

Deux modèles, deux types de structure

Flexbox organise les éléments d’un conteneur principalement selon un seul axe : une rangée ou une colonne. Cet axe principal est accompagné d’un axe transversal, perpendiculaire. Vous utilisez donc Flexbox lorsque les éléments forment une séquence dont l’ordre et la répartition sont prioritaires, comme les liens d’une navigation ou les informations d’un bandeau.

Grid est conçu pour organiser le contenu selon deux dimensions coordonnées : les colonnes et les rangées. Il convient lorsque vous devez construire une structure de cellules, aligner des cartes entre elles ou répartir plusieurs zones dans une page. Vous pensez alors à la forme globale de la zone, plutôt qu’à la seule distribution d’une suite d’éléments.

Choisir selon le rôle de la zone

Pour la page de l’atelier de jardinage, la navigation est une ligne d’éléments qui doit rester lisible et s’adapter à l’espace disponible. Flexbox est un choix naturel : vous pouvez aligner le logo et les liens, puis laisser la disposition gérer leur répartition. Les réglages justify-content, gap et flex-wrap ont déjà été étudiés dans la leçon sur la répartition de la navigation.

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

:root {
    --couleur-texte: #26352b;
    --couleur-accent: #39734a;
    --espace: 1rem;
}

.entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espace);
    flex-wrap: wrap;
    padding: var(--espace);
    color: var(--couleur-texte);
}

.entete nav {
    display: flex;
    gap: var(--espace);
}

Dans cet exemple, la règle Flexbox placée sur .entete organise le logo et la navigation dans une rangée. Le second conteneur Flexbox organise les liens entre eux. Le résultat est une barre où le logo et le groupe de liens sont séparés, avec un espacement régulier entre les liens ; si l’espace manque, les éléments peuvent passer sur une nouvelle ligne.

Les conseils pratiques posent un autre problème. Imaginez trois cartes par rangée, avec des colonnes alignées et plusieurs rangées qui composent une grille. Grid permet de raisonner sur ces deux dimensions ensemble. Dans la prochaine leçon, vous définirez les colonnes de cette grille ; ici, retenez seulement que sa structure se choisit à partir de l’ensemble des cartes, et non de chaque rangée prise isolément.

Éviter le choix automatique

Ne choisissez pas Flexbox uniquement parce qu’il est déjà utilisé ailleurs dans la feuille de styles. Si les cartes doivent s’aligner en colonnes et en rangées, une disposition unidimensionnelle peut vous conduire à régler séparément chaque rangée, sans garantir une structure commune. À l’inverse, une navigation est d’abord une séquence de liens : une grille complète serait souvent plus complexe que nécessaire.

À retenir

• Flexbox convient principalement à une disposition organisée sur un axe, comme une navigation.
• Grid convient à une structure bidimensionnelle qui coordonne rangées et colonnes.
• Choisissez le modèle d’après le rôle et la structure de chaque zone, pas d’après les autres règles de la page.
• Vous pouvez associer Flexbox et Grid dans une même page, chacun dans la zone qui lui convient.