Module 9 : Flexbox

Ton menu ressemble à une liste de courses

Souviens-toi du module 3. Tu as construit le menu du FC Courtételle : un <nav>, une <ul>, trois <li> bien rangés. Impeccable côté structure.

Sauf qu'à l'écran, il s'affiche comme ça :

Galerie
Équipes
Contact

Un lien par ligne. Une liste de courses. Or aucun site au monde n'affiche son menu à la verticale en haut de page — tu le veux en rangée, comme sur les millions de sites que tu consultes chaque semaine.

Et jusqu'ici, tu n'avais rien pour le faire. padding, margin, border : ils règlent l'intérieur d'une boîte, jamais la place des boîtes les unes par rapport aux autres. Ce module comble exactement ce trou.

Un conteneur, des enfants

Voilà toute l'idée de Flexbox, et elle tient en une phrase :

Tu poses une déclaration sur le parent, et ses enfants directs se rangent tout seuls.

Deux rôles, donc, et il faut les distinguer dès maintenant :

• Le conteneur — l'élément parent. C'est lui qui reçoit display: flex. Une <ul>, un <header>, un <div> : n'importe quel élément peut devenir un conteneur flex.
• Les enfants — ses enfants directs, et eux seuls. Les <li> d'une <ul>, le logo et le menu d'un <header>. Ils ne reçoivent aucune déclaration : ils obéissent.

C'est la source d'erreur numéro un du module, et tu la commettras au moins une fois : poser display: flex sur les enfants au lieu du parent. Rien ne bouge, et c'est normal.

Deux axes, deux propriétés

Un conteneur flex a deux axes, et chacun a sa propriété :

Retiens le mot principal : c'est l'axe le long duquel les enfants se rangent. Par défaut il est horizontal, donc les enfants forment une rangée.

Et voici le piège que tu vas rencontrer à l'exercice 7.5 : cet axe peut tourner. Le jour où tu passes ton conteneur en colonne, l'axe principal devient vertical, l'axe secondaire devient horizontal, et les deux propriétés échangent leur effet sans changer de nom. On y reviendra tranquillement — c'est le point le plus dur du module, et le seul qui demande vraiment de réfléchir.

Quinze ans de bidouille

Petit détour par l'histoire, parce qu'il explique pourquoi Flexbox paraît si simple.

De 1996 à 2012, le CSS n'avait aucun outil de mise en page. Pour aligner trois blocs côte à côte, les développeurs détournaient des propriétés prévues pour autre chose : float, inventée pour faire couler du texte autour d'une image, ou même les tableaux HTML, prévus pour des données. Chaque mise en page était un château de cartes, et le moindre changement de contenu le faisait s'effondrer.

Flexbox arrive dans les navigateurs vers 2013. Une propriété, un mot-clé, et le problème disparaît. C'est aujourd'hui l'outil le plus utilisé de tout le CSS : barres de navigation, cartes, boutons, formulaires, pieds de page. Tu ne feras plus une page sans lui.

Au programme

Six exercices, et le site du club prend enfin l'allure d'un vrai site :

1. display: flex — le menu passe en rangée, le déclic du module
2. justify-content — répartir sur l'axe principal
3. align-items — centrer sur l'axe secondaire, enfin
4. gap — de l'espace entre les enfants, sans une seule marge
5. flex-direction — passer en colonne, et voir les axes s'inverser
6. Le défi : la barre de navigation du FC Courtételle, complète

Prêt ?

Ton menu attend depuis le module 3. Deux minutes de lecture, et tu vas le remettre à l'endroit. C'est parti !