Ça fait des années que je fais du CSS. Je suis un grand adepte du
full-CSS et de l’usage des dernières technologies CSS. L’une d’elle c’est
le modèle d’affichage de boîtes flexibles : FlexBox.
Ce concept en CSS existe depuis plusieurs années mais les spécifications n’ont pas cessées de changer (il y a au moins 3 spécifications différentes… par
navigateur) mais il peut actuellement être considéré comme stable : les navigateurs à jour actuellement implémentent tous la même spécification.
Si je vous en parle en particulier c’est que plus je l’utilise, plus elle me facilite la vie.
Vous désirez centrer un élément ? L’étirer ? Changer l’ordre de plusieurs éléments ? Orienter des menus ? Faire des colonnes égales ? Le tout
sans vous faire casser la tête ?
FlexBox est fait pour ça, et c’est relativement simple.
Flexbox fonctionne un peu sur le même principe que le duo ul/li ou le trio table/table-row/table-cell, à savoir une relation bloc-parent/blocs-enfants :
il y a ainsi un parent en « display: flex » et c’est avec les blocs enfants qu’on bricole. Si vous avez compris tout ça, vous avez compris 80% de flexbox.
Ici je vous propose quelques exemples de ce que permet FlexBox.
En revanche, cet article n’est pas un tuto qui vous apprend tout ce qu’il faut savoir. Il s’agit plus d’un mémo illustré de code et de démos pour accomplir de choses précises qu’on avait l’habitude de faire autrement. Pour des tutos ou cours complets, j’ai mis quelques liens en bas de l’article.
Centrer
Centrer un élément horizontalement en simple CSS est très simple. Centrer verticalement relève d’avantage du casse-tête : il faut jongler avec line-height, position, display, margin et parfois du
JavaScript…
Avec flex, c’est plus simple :
En prenant le premier code HTML ci-dessus, pour centrer un bloc dans l’autre sur les deux axes :
#parent {
display: flex;
justify-content: center;
align-items: center;
}
#enfant {
}
Ici :
- justify-content permet de placer les éléments sur l’axe principal (horizontal, par défaut) : soit au début, soit espacés, soit à la fin, soit centré comme ici.
- align-items permet de placer les éléments sur l’axe secondaire (vertical, par défaut) de la même façon que justify-content.
Bien-sûr, les éléments sont centrés même si on ajoute des marges, des bordures ou des tailles en %.
Par contre, si vous voulez centrer une image ou une vidéo, ces dernières ayant une dimension et une proportion propre (contrairement à du texte), je conseille
cette méthode (flexbox ne sera pas adapté, car une image n’est pas flexible si elle doit conserver ses proportions).
Colonnes de même hauteur
Un autre problème ancestral en CSS, c’est celui des colonnes de même hauteur. Avant il fallait des images ou des tableaux (et si utiliser les tableaux était un crime, « display: table-cell; » reste un délit).
Ici, le code est simple à comprendre également : on va utiliser un
#parent et deux
.enfants.
Sur les enfants, le premier est de taille fixe et le second prend tout le reste de l’espace disponible horizontalement.
Enfin, on dit que les enfants doivent occuper toute la place sur l’axe vertical.
#parent {
display: flex;
align-items: stretch;
}
.enfant:first-child {
flex: 0 0 200px;
}
.enfant:last-child {
flex: 1 1 auto;
}
- Le align-items:stretch sur le parent signifie que les éléments sont étirés sur l’axe vertical, donc les deux seront de la taille de l’élément le plus grand (le principe des colonnes de même hauteur).
- flex: 0 0 200px sur le premier enfant : il y a 3 valeurs pour flex. Les deux premières sont pour la flexibilité : 0 pour la flexibilité en rétrécissement et 0 pour la flexibilité en agrandissement et une largeur initiale de 200px. Pas de flexibilité signifie donc que la colonne est de largeur fixe.
- flex: 1 1 auto du second (et dernier) enfant : il est donc entièrement flexible (en rétrécissement comme en agrandissement) et il n’a pas de largeur précise.
Vous pouvez ainsi faire plus de 2 colonnes aussi : une centrale large avec deux petites sur chaque côté, comme dans
cet exemple.
Ayez en tête par contre que si vous utilisez des blocs flexibles, les autres types de positionnement (display, float…) ne marchent plus : c’est l’affichage en mode « flex » qui prend le dessus. Aussi, si vous déclarez une largeur de base avec
flex: 1 1 200px par exemple, alors la propriété
width ne donnera pas non plus le comportement attendu.
L’avantage de cette méthode sur une colonne flottante, c’est que le bloc flottant pouvait passer au dessus du reste de la page.
Étirer
Flex, vous commencez à le voir, permet non seulement de jouer sur le placement et l’étirement vertical, mais aussi l’étirement horizontal. À l’image de ce que float permet, vous pouvez ici placer un élément sur un côté ou l’autre, mais tout en le conservant dans le flux de la page.
C’est ce qui est utilisé dans mon astuce pour placer
les icônes à côté des formulaires : l’icône est de largeur fixe et le champ du formulaire est flexible et peut s’agrandir librement, tout en restant bien à côté de l’icône. Flexbox apporte, en plus des flottants, tous les avantages du centrage et de l’étirement.
C’est ici la propriété
flex: 1; appliqué sur le bloc à étirer qui se charge de faire tout ça.
Cette idée peut être utilisée sur les champs de formulaire, donc, mais aussi sur les titres-icônes, les menus et tout ce que vous voulez en fait.
Mélanger
Une des avancées importantes apportée par flexbox, c’est que l’on peut déplacer des blocs au sein de la page sans avoir à toucher au code HTML.
Si le code HTML contient trois éléments enfants dans un ordre précis (A, B, C), on peut les ordonner autrement : A, C, B, ou B, A, C par exemple :
.enfant {
flex: 1;
}
#enfant-A {
order: 3;
}
#enfant-B {
order: 1;
}
#enfant-C {
order: 2;
}
Ici, les éléments sont tous flexibles et on a modifié leur ordre d’affichage : si dans le code HTML l’ordre est A, B, C, à l’affichage flexbox changera ça en B, C, A :
Bien-sûr, vous pouvez combiner l’ordre des éléments avec toutes les autres fonctionnalités de flexbox.
Orienter
Une autre innovation est la possibilité d’orienter les éléments avec une simple propriété : si on a une collection d’éléments enfant, on peut les placer sur une ligne ou sur une colonne :
Pour mettre en ligne (par défaut) :
#parent {
flex-direction: row;
}
Et en colonne :
#parent {
flex-direction: column;
}
Là aussi, il peut être intéressant de mélanger l’orientation avec les autres propriétés de flexbox.
Notez qu’au dessus j’ai parlé d’axe «
principal » et «
secondaire ». Le
flex-direction permet d’inverser les deux axes en fait. Par défaut, l’axe principal est horizontal (les éléments sont placés sur une ligne) et l’axe secondaire est vertical (les éléments occupent une section de la ligne, mais peuvent être en haut, au centre ou en bas
de leur sections respectives).
Aérer
Encore un effet attendu de flexbox : pouvoir disperser des éléments sur une ligne, en distribuant l’espace vide entre chaque élément. Ceci est particulièrement pratique pour les menus : avec ce code, inutile de diviser la largeur de l’écran par 5 et donner à chaque élément 1/5 de la largeur (et vous embêter avec les marges et les bordures) : flexbox peut distribuer les éléments sur toute la ligne de façon fluide.
#parent {
justify-content: space-between;
}
Les éléments aux extrémités restent à chaque bout et les autres éléments sont espacés sur toute la ligne :
Ressources
Pour des choses plus évoluées encore, sachez que vous pouvez faire des blocs flexibles et imbriqués : un élément enfant flexible peut lui-même être en
display:flex et avoir des enfants flexibles eux aussi, comme sur
cette démo, avec leur propre orientation et effets.
C’est de nouveau en débat : 
Bon ça y est…
(ne vous fiez pas à la taille des captures d’écran : la première est zoomée 3 fois et la seconde seulement 2 fois ; sans interpolation dans les deux pas. C’est la pixellisation qu’il faut regarder).
Pour les utilisateurs de Firefox, voici quelques idées qui peuvent le rendre plus pratiques. Il y en a un peu pour tous les goûts.