Colonne ou rangée

🎯 Objectif

Faire tourner l'axe principal d'un quart de tour — et comprendre ce qui arrive aux deux propriétés que tu viens d'apprendre. C'est le point le plus dur du module.

📖 Exemple

Une fiche de recette, construite en colonne : la durée en haut, le titre au milieu, le niveau en bas, le tout centré de gauche à droite :

<div class="fiche">
    <p class="duree">45 min</p>
    <h2>Tarte aux pommes</h2>
    <p class="niveau">Facile</p>
</div>

.fiche {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 190px;
    height: 170px;
    padding: 12px;
    border: 2px solid #d45e95;
    background-color: #f5f5f4;
}

.fiche h2,
.fiche p {
    margin: 0;
}

Pourquoi cette inversion ? flex-direction: column fait pivoter l'axe principal, qui descend désormais de haut en bas — et l'axe secondaire, qui lui est toujours perpendiculaire, part à l'horizontale. Les deux axes ont tourné ensemble. Les propriétés, elles, n'ont ni changé de nom, ni changé de rôle : chacune reste attachée à son axe.

C'est pour ça que, sur la fiche, justify-content: space-between écarte à la verticale et align-items: center centre à l'horizontale — l'exact miroir des exercices 7.2 et 7.3. D'où le réflexe des professionnels :

Ne dis jamais « je veux centrer horizontalement ». Dis « je veux centrer sur l'axe secondaire » — et regarde d'abord dans quel sens va ton conteneur.

Ce combo colonne + space-between est le moyen le plus simple de coller un bouton en bas d'une carte, quelle que soit la longueur du texte au-dessus. La moitié du web moderne est bâtie dessus.

♿ flex-direction accepte aussi row-reverse et column-reverse, qui inversent l'ordre visuel sans toucher à l'ordre du HTML. Une personne qui navigue au clavier ou avec un lecteur d'écran suit toujours l'ordre du code, et se retrouve à sauter du dernier élément au premier sans comprendre. Si l'ordre doit changer pour de bon, change-le dans le HTML.

📝 Consigne

La carte de joueur du FC Courtételle est en mode flex, mais ses trois lignes se marchent dessus. Dans la règle .carte-joueur, trois déclarations à ajouter :

1. Change le sens de l'axe principal avec la propriété flex-direction, pour qu'il descende de haut en bas — la valeur column
2. Répartis les trois enfants avec le maximum d'espace entre eux — avec la propriété qui commande l'axe principal, qui travaille maintenant à la verticale
3. Centre-les — avec celle qui commande l'axe secondaire, passé à l'horizontale

Prends une seconde pour choisir laquelle est laquelle : c'est exactement le piège de l'exercice. Et ne change pas la hauteur de la carte.