Coller un menu à droite, centrer un bloc, empiler des éléments du haut en bas de la page : avec block et inline-block, ces mises en page demandent des astuces. Flexbox est le premier outil de CSS pensé pour la mise en page. Trois propriétés suffisent pour en saisir le principe.
Partons d’une rangée de boutons, comme celle de la leçon précédente.
En autonomie
1h
<div class="menu">
<div class="bouton">Accueil</div>
<div class="bouton">Articles</div>
<div class="bouton">Contact</div>
</div>
Pour les ranger côte à côte, on les passait en inline-block. Avec Flexbox, on ne touche plus aux boutons : c’est leur parent qu’on règle.
.menu {
display: flex;
}
Le div.menu devient un conteneur flexible, et ses enfants directs des éléments flexibles. Ils se rangent sur une ligne, quel que soit leur propre display.
Le rendu ressemble à celui des inline-block, sans leur défaut : aucun espace ne vient se glisser entre deux éléments flexibles.
Flexbox ne règle que les enfants directs du conteneur. Les petits-enfants gardent leur comportement habituel, à moins que leur parent ne devienne à son tour un conteneur flexible.
Avant de continuer, demandez à la classe comment placer ces trois boutons au centre de la ligne, puis à droite.
Les trois carrés ne remplissent pas leur conteneur : il reste de l’espace vide. La propriété justify-content, posée sur le conteneur, décide où il va.
.menu {
display: flex;
justify-content: center;
}
flex-start, par défaut
center
flex-end
space-between
space-around
| Valeur | Où va l’espace vide |
|---|---|
flex-start |
à la fin : les éléments se serrent au début |
center |
des deux côtés, à parts égales |
flex-end |
au début : les éléments se serrent à la fin |
space-between |
entre les éléments, le premier et le dernier touchent les bords |
space-around |
autour de chaque élément, autant d’un côté que de l’autre |
On écrit flex-start et flex-end, et non left et right. Le début d’une ligne dépend du sens d’écriture : sur un site en arabe ou en hébreu, il est à droite.
Un conteneur flexible range ses enfants sur une ligne, mais il sait aussi les ranger en colonne. C’est la propriété flex-direction : row, la ligne, par défaut, ou column, la colonne.
.page {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
En colonne, justify-content change de sens avec elle : il répartit la hauteur du conteneur. flex-start désigne le haut, flex-end le bas.
center
flex-end
space-between
Pour qu’il y ait de l’espace vide à répartir, le conteneur doit être plus haut que son contenu. Un élément block prend toute la largeur de son parent, mais seulement la hauteur de son contenu : en colonne, il faut souvent lui donner une hauteur.
Avant Flexbox, aucune propriété ne permettait de répartir ainsi la hauteur d’un élément. C’est sa plus grande nouveauté.
Un élément flexible peut lui-même être un conteneur flexible. C’est ainsi qu’on construit une vraie mise en page : chaque conteneur range ses propres enfants, sans rien savoir des autres.
Prenons une barre de navigation, avec un logo à gauche et trois liens à droite.
<header class="barre">
<img class="logo" src="logo.png" alt="Accueil">
<nav class="liens">
<a href="/cours/introduction-web/articles/">Articles</a>
<a href="/cours/introduction-web/agenda/">Agenda</a>
<a href="/cours/introduction-web/contact/">Contact</a>
</nav>
</header>
.barre {
display: flex;
justify-content: space-between;
}
.liens {
display: flex;
}
La barre n’a que deux enfants, le logo et le nav : space-between envoie l’un à gauche, l’autre à droite. Le nav, à son tour conteneur flexible, range les trois liens côte à côte. Sans lui, les liens seraient trois enfants de la barre, et space-between les éparpillerait.
Un dernier comportement se remarque vite en imbriquant : par défaut, les éléments flexibles s’étirent dans l’autre direction. Sur une ligne, ils prennent toute la hauteur du conteneur ; en colonne, toute sa largeur. Dans cet exemple, le nav est aussi haut que la barre.
Flexbox compte bien d’autres propriétés, qui dépassent cette leçon. Elles s’apprennent facilement une fois le conteneur et l’espace vide compris.
| Propriété | Ce qu’elle permet |
|---|---|
align-items |
aligner les éléments dans l’autre direction, au lieu de les étirer |
flex |
agrandir un élément pour qu’il occupe l’espace vide |
flex-wrap |
passer à la ligne quand la place manque |
margin: auto |
pousser un seul élément vers un bord |
Les deux derniers exercices de cette leçon les font découvrir une à une.
On commence par les trois propriétés de cette leçon, puis on découvre les autres en jouant.
Dans ce jeu, la page bleue contient deux sortes d’éléments. Une boîte peut contenir d’autres éléments, un carré a une taille fixe et reste vide. Trois réglages comptent : le display d’une boîte, block ou flex, ses flex-direction et justify-content, et la place de chaque élément dans le code.
Ouvrez Boîtes flexibles et reproduisez chaque dessin. Les premiers niveaux font le tour de justify-content, les suivants passent en colonne, les derniers imbriquent des conteneurs.
Flexbox Froggy est un jeu où l’on aide des grenouilles à rejoindre leur nénuphar en écrivant du CSS. Ses premiers niveaux reprennent justify-content, les suivants présentent align-items, flex-direction, order et flex-wrap.
Lancez Flexbox Froggy en français et avancez le plus loin possible. Quand un niveau résiste, relisez sa consigne à gauche de l’écran : elle présente toujours la propriété à utiliser.
Flexbox Defense est un jeu de tower defense : on place des tourelles avec Flexbox pour arrêter les ennemis avant qu’ils ne traversent le terrain. Le jeu est en anglais, mais les propriétés sont celles de Flexbox Froggy.
Une fois Flexbox Froggy terminé, lancez Flexbox Defense. Écrivez vos règles, puis lancez la vague : si un ennemi passe, corrigez la position de vos tourelles.