Aligner des éléments avec Flexbox

Une page peut contenir plusieurs éléments qui doivent rester bien alignés : les liens d’un en-tête, des horaires disposés côte à côte ou les informations d’un bloc de contact. Sans règle de mise en page adaptée, les espacements deviennent difficiles à contrôler. Flexbox vous permet d’organiser ces éléments sur une rangée ou une colonne, puis de régler leur alignement et leur distance.

Vous avez déjà appris à viser des éléments avec les sélecteurs de type, de classe, d’identifiant et de descendant. Ici, vous allez agir sur le conteneur qui rassemble plusieurs éléments : c’est lui qui reçoit les principales propriétés Flexbox. Les éléments placés directement à l’intérieur de ce conteneur deviennent des éléments flexibles.

Créer une rangée avec Flexbox

Pour activer Flexbox, ajoutez display: flex au conteneur. Par défaut, ses éléments s’alignent sur une rangée, dans l’ordre où ils apparaissent dans le HTML. Dans le projet de l’atelier, cette règle convient aux liens de navigation : ils forment une ligne que vous pouvez espacer sans ajouter une marge distincte à chaque lien.

<!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="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</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main id="accueil">
        <h1>Faites pousser votre jardin</h1>
        <p>Participez à un atelier pratique pour apprendre à cultiver vos plantes.</p>

        <section id="horaires">
            <h2>Horaires</h2>
            <ul class="horaires">
                <li>Mercredi — 14 h</li>
                <li>Samedi — 10 h</li>
            </ul>
        </section>

        <section id="conseils">
            <h2>Conseils pratiques</h2>
            <p>Apportez des gants et un carnet pour noter vos découvertes.</p>
        </section>

        <section class="contact" id="contact">
            <div>
                <h2>Contact</h2>
                <p>Écrivez-nous pour réserver votre place.</p>
            </div>
            <a href="mailto:[email protected]">[email protected]</a>
        </section>
    </main>
</body>
</html>

Dans la feuille de style, flex-direction définit l’axe principal : row place les éléments en rangée, tandis que column les empile en colonne. Les propriétés d’alignement dépendent de cet axe. Avec justify-content, vous répartissez les éléments le long de l’axe principal ; avec align-items, vous les alignez sur l’axe secondaire. La valeur gap ajoute un espacement régulier entre les éléments, sans créer d’espace extérieur autour du groupe.

:root {
    --couleur-texte: #26352b;
    --couleur-fond: #f5f7f2;
    --couleur-accent: #386641;
    --espace: 1rem;
}

/* Styles de base de la page */
body {
    margin: 0;
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    font-family: Arial, sans-serif;
}

.entete {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--espace);
    padding: var(--espace) 2rem;
    background-color: white;
}

.logo {
    color: var(--couleur-accent);
    font-weight: bold;
    text-decoration: none;
}

.navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--espace);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem;
}

.horaires {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    padding-left: 1.25rem;
}

.contact {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--espace);
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: white;
    border: 1px solid #cbd5c7;
}

.contact a {
    color: var(--couleur-accent);
}

Dans .entete, space-between place le logo d’un côté et la navigation de l’autre. La valeur center de align-items les aligne au milieu de l’axe secondaire, ici vertical. Les liens de navigation ont leur propre conteneur flexible : ils restent donc espacés les uns des autres par gap, indépendamment de la position du logo.

Choisir l’alignement adapté

Les valeurs de justify-content répondent à différents besoins : flex-start regroupe les éléments au début de l’axe principal, center les centre, et space-between répartit l’espace disponible entre eux. La propriété align-items accepte notamment flex-start, center et stretch. Pour une colonne, l’axe principal devient vertical ; les effets de ces propriétés suivent cette orientation.

.contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace);
}

Cette variante empile le titre, le texte et le lien du contact. Comme la direction est maintenant une colonne, align-items: flex-start les aligne au début de l’axe horizontal. Pour que les éléments d’une rangée puissent passer sur une autre ligne si l’espace manque, ajoutez flex-wrap: wrap au conteneur. Cette propriété est utile lorsque plusieurs éléments risquent de ne pas tenir sur une seule rangée.

Avec la feuille de style complète, les liens de navigation sont regroupés en haut à droite de l’en-tête, les horaires forment une rangée et les informations de contact sont réparties aux deux extrémités de leur bloc. Si vous remplacez la direction du contact par une colonne, son contenu s’empile tout en gardant un espacement constant. Vous pouvez donc choisir la disposition selon la relation entre les éléments, sans modifier leur ordre dans le HTML.

À retenir

• Activez Flexbox sur le conteneur avec display: flex.
• Choisissez l’orientation avec flex-direction: row ou column.
• Utilisez justify-content pour l’axe principal et align-items pour l’axe secondaire.
• Réglez l’écart entre les éléments avec gap ; autorisez le retour à la ligne avec flex-wrap: wrap si nécessaire.

Dans la prochaine leçon, vous organiserez des contenus en lignes et en colonnes avec CSS Grid.