Répartis sur l'axe

🎯 Objectif

Décider où se placent les enfants sur l'axe principal — autrement dit, que faire de la place qui reste.

📖 Exemple

La vitrine d'une boulangerie : deux conteneurs flex, deux répartitions différentes, dans la même fenêtre :

<div class="rayon">
    <span>Pain</span>
    <span>Croissant</span>
    <span>Tresse</span>
</div>

<div class="caisse">
    <span>Total : 8 CHF</span>
</div>

.rayon {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    background-color: #eab308;
}

.caisse {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding: 12px;
    background-color: #f5f5f4;
}

Pourquoi une propriété pour ça ? Parce qu'il reste presque toujours de la place sur l'axe principal — trois produits de 60 pixels dans une vitrine de 400, ça laisse du vide, et le navigateur doit bien le mettre quelque part. justify-content en décide : space-around donne ici à chaque produit la même bulle d'air autour de lui, flex-end pousse le total tout à droite, comme sur un ticket de caisse. Et toujours sur le conteneur : posée sur un enfant, la propriété est ignorée en silence, sans le moindre message d'erreur.

Cinq valeurs en tout, résumées sur le schéma : flex-start (le défaut, tout à gauche), flex-end, center, space-between — le premier collé à gauche, le dernier à droite, tout l'espace réparti entre eux — et space-around. La plus utilisée du web ? space-between : logo à gauche, menu à droite ; libellé à gauche, prix à droite. Tu t'en serviras au défi 7.6.

♿ Attention à ne pas trop écarter : un petit groupe de liens étalé sur toute la largeur d'un grand écran, c'est des centaines de pixels à traverser entre deux clics. Garde les éléments d'un même groupe proches les uns des autres.

📝 Consigne

Deux conteneurs du site du club, déjà en mode flex, dont tous les enfants s'entassent à gauche. Dans l'onglet CSS, la même propriété — justify-content — dans les deux règles, avec une valeur différente :

1. Dans la règle .barre : écarte au maximum le nom du club et la saison — le premier tout à gauche, le dernier tout à droite — avec la valeur space-between
2. Dans la règle .actions : regroupe au contraire les trois liens au milieu de la rangée, avec la valeur center