Créer un conteneur Flexbox

Un en-tête contient souvent plusieurs éléments qui doivent former une ligne cohérente : le nom de l’atelier, puis sa navigation. En les plaçant sans méthode, ils peuvent s’empiler ou se positionner de façon difficile à maîtriser. Vous allez utiliser Flexbox pour organiser ces éléments dans un même conteneur, sans recourir aux flottants.

Repérer le conteneur et ses éléments

Flexbox s’active sur un élément parent. Cet élément devient le conteneur flex ; ses enfants directs deviennent les éléments flex. Dans notre projet, le conteneur sera l’en-tête et ses éléments directs seront le lien du nom de l’atelier et la navigation. Les liens qui se trouvent à l’intérieur de la navigation ne deviennent pas des éléments flex de l’en-tête : ils appartiennent à un autre niveau de la structure.

La propriété display: flex appliquée au parent organise ses enfants directs sur l’axe principal. Par défaut, cet axe est horizontal : les éléments se suivent de gauche à droite dans l’ordre du document. L’axe perpendiculaire est appelé axe transversal. À ce stade, retenez surtout qu’activer Flexbox définit une direction de placement ; cela ne règle pas encore la répartition ni l’alignement précis des éléments.

Préparer le HTML de l’en-tête

Voici une page minimale pour tester l’en-tête. La balise header est le parent auquel vous appliquerez Flexbox. Le lien de marque et l’élément nav sont ses enfants directs, tandis que les liens « Horaires », « Conseils » et « Contact » sont imbriqués dans nav.

<!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="entete">
        <a class="marque" href="#accueil">Atelier des saisons</a>
        <nav aria-label="Navigation principale">
            <a href="#horaires">Horaires</a>
            <a href="#conseils">Conseils</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    <main id="accueil">
        <h1>Jardiner au fil des saisons</h1>
        <p>Bienvenue à l’atelier de jardinage.</p>
    </main>
</body>
</html>

Activer Flexbox sur le parent

Dans style.css, ciblez la classe de l’en-tête et ajoutez display: flex. La déclaration s’applique au parent, pas aux enfants individuellement. La propriété flex-direction précise la direction de l’axe principal ; sa valeur par défaut est row, que vous pouvez écrire explicitement pour rendre l’intention visible.

:root {
    --couleur-texte: #24352b;
    --couleur-fond: #f4f1e8;
    --espacement: 1rem;
}

* {
    box-sizing: border-box;
}

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

.entete {
    display: flex;
    flex-direction: row;
    padding: var(--espacement);
    background-color: var(--couleur-fond);
}

.entete a {
    color: inherit;
}

nav a {
    margin-left: var(--espacement);
}

En ouvrant le fichier dans le navigateur, vous verrez « Atelier des saisons » et le bloc de navigation placés côte à côte. C’est le résultat de la création du conteneur flex : ses deux enfants directs occupent la ligne principale. Les liens de navigation restent, eux, placés selon leur comportement normal ; cette règle ne les transforme pas en éléments flex du header.

Vérifier la structure dans le navigateur

Ouvrez les outils de développement et sélectionnez header.entete dans l’inspecteur. Vérifiez que la règle display: flex est active et que ses enfants directs sont bien la marque et la navigation. Cette vérification permet de distinguer un problème de structure HTML d’une règle CSS mal ciblée. Si vous désactivez temporairement display: flex dans l’inspecteur, les éléments reprennent leur disposition normale ; réactivez la règle pour comparer.

À retenir

• Flexbox s’active sur un parent avec la déclaration display: flex.
• Les enfants directs du parent deviennent les éléments flex.
• Par défaut, l’axe principal est horizontal ; flex-direction: row rend ce choix explicite.
• Vérifiez dans l’inspecteur que la règle cible le parent qui contient les éléments à organiser.

Dans la prochaine leçon, vous répartirez les éléments de la navigation et réglerez l’espace entre eux.