Passe en mode flex

🎯 Objectif

Faire passer une liste de la verticale à l'horizontale avec une seule déclaration. C'est le déclic du module.

📖 Exemple

La barre d'outils d'un jeu vidéo : deux fois la même liste de trois actions. La première est laissée telle quelle, la seconde reçoit display: flex — regarde la différence :

<ul class="empile">
    <li>Épée</li>
    <li>Bouclier</li>
    <li>Potion</li>
</ul>

<ul class="outils">
    <li>Épée</li>
    <li>Bouclier</li>
    <li>Potion</li>
</ul>

.empile,
.outils {
    list-style: none;
    margin: 0 0 12px;
    padding: 12px;
    background-color: #f5f5f4;
}

.outils {
    display: flex;
}

.outils li {
    margin-right: 12px;
}

Pourquoi la première s'empile-t-elle ? Chaque <li> est un bloc : il réclame toute la largeur disponible, donc pousse son voisin en dessous. display: flex, posé sur le parent, change ça d'un coup : la liste devient un conteneur flex, et ses enfants directs — les trois <li>, pas ce qu'il y a dedans — ne prennent plus que la place de leur contenu et se rangent le long de l'axe principal, horizontal par défaut. Retiens le mot directs : Flexbox ne descend que d'un étage.

La seconde règle, margin-right sur chaque <li>, écarte les voisins. C'est la méthode d'avant Flexbox, et elle a un défaut caché : regarde le dernier élément, il traîne un espace inutile à sa droite alors qu'il n'a personne à pousser. On démolira cette habitude proprement à l'exercice 7.4.

♿ Flexbox ne change que l'apparence : l'ordre lu par les lecteurs d'écran et suivi par la touche Tab reste celui du HTML. Le principe vaut pour tout le module — si l'ordre visuel s'éloigne de l'ordre du code, quelqu'un finit par se perdre.

📝 Consigne

Le menu du FC Courtételle est bien construit — mais il s'affiche comme une liste de courses. Dans l'onglet CSS, sans toucher au HTML :

1. Dans la règle existante qui vise la liste (.menu ul), ajoute la propriété display avec la valeur flex
2. Ouvre une nouvelle règle pour les éléments de liste (sélecteur .menu li) et pousse chaque lien de 16 pixels vers la droite avec la propriété margin-right