Les flex-box CSS - Tutoriel.
Présentation des flex-box.
Introduit en CSS3, les flex-box apportent une solution simple et puissante au problème courant de mise en page consistant à positionner plusieurs contenus côte à côte. Les flex-box remplacent avantageusement les éléments flottants. Ces derniers peuvent être réservés à ce pour quoi ils ont été conçus : l'habillage d'une image ou d'un bloc de texte.
Pour créer un flex-box il suffit d'un élément parent auquel on applique
le style display:flex;
. Sans qu'il n'y ait rien à faire de
plus, ses enfants se positionneront côte à côte et non plus les uns
en dessous des autres.
Voici un élément div possédant trois enfants. Par défaut, ces derniers se disposent les uns en dessous des autres. leur largeur est par défaut 100%. Ce pourcentage est calculé sur la largeur du parent après déduction des marges éventuelles, extérieures et intérieures.
Voici maintenant la même construction mais le div
parent a reçu la propriété display:flex;
.
Immédiatement, les trois cadres enfants se positionnent côte à côte
à l'intérieur du parent. Et leur largeur est définie par leur contenu.
Ceci est le principe de base des flex-box. Nous allons maintenant approfondir leurs multiples possibilités.
Remarque : si votre but est simplement d'afficher du texte sur plusieurs
colonnes, comme dans un journal, reportez-vous à la propriété CSS
columns
.
La propriété flex-direction
.
Les containers flex-box peuvent fonctionner dans les deux sens. C'est à dire disposer leurs enfants horizontalement ou verticalement. Le besoin le plus courant est de les disposer horizontalement mais la disposition verticale est intéressante également.
La propriété CSS flex-direction
définit l'axe primaire
pour la disposition des éléments enfant (en ligne ou en colonne).
L'axe secondaire se déduit facilement.
flex-direction
définit également le sens d'affichage :
de droite à gauche ou de gauche à droite, de haut en bas ou de bas en haut.
Amusez-vous avec ce petit simulateur ou reportez vous à la description
complète de la propriété CSS flex-direction
.
Le positionnement des éléments dans un flex-box.
Plusieurs propriétés nous permettent de gérer l'alignement et la répartition des éléments enfant à l'intérieur du container flex :
justify-content
: gère l'alignement des enfants suivant l'axe principal défini parflex-direction
. Le plus souvent ce sera l'axe horizontal.align-content
etalign-items
: gèrent l'alignement des enfants suivant l'axe secondaire, la plupart du temps ce sera l'axe vertical. Utilisezalign-content
si le container flex comporte plusieurs lignes etalign-items
si tous les éléments enfant sont sur la même ligne.align-self
: cette propriété se définie au niveau de l'un des éléments enfant, pour lui donner un alignement différent.
Remarque : les propriétés qui agissent suivant l'axe secondaire ont
un nom qui commence par align
alors que celle qui agit
suivant l'axe primaire a un nom qui commence justify
.
C'est un moyen mnémotechnique pour s'y retrouver dans toutes ces
propriétés.
Le simulateur ci-dessous vous permet de tester la propriété
justify-content
. Cette dernière ne se contente pas
des valeurs habituelles d'alignement (gauche, centre, droite) mais
gère également la répartition des éléments dans le container flex.
Les dimensions des éléments dans un flex-box.
De même que l'alignement, les dimensions des éléments enfant peuvent
être gérées avec précision. Les propriétés habituelles width
et height
sont disponibles mais n'exploitent pas toute
la puissance des flex-box. Préférez les propriétés suivantes :
flex-basis
: définit la dimension initiale des éléments enfant. On définit souvent la valeur de cette propriété en pourcentage afin d'obtenir une disposition qui s'adapte à la taille de l'écran (responsive).flex-grow
: indique si l'élément enfant peut s'agrandir pour remplir le container flex. Si plusieurs enfants peuvent s'agrandir ils le font proportionnellement à la valeur de cette propriété.flex-shrink
: indique si l'élément enfant peut se réduire lorsque la place disponible est insuffisante pour tous les éléments enfant.
Les retours à la ligne dans un flex-box.
La propriété CSS flex-wrap
gère les retours à la ligne dans un
container flex. Le mieux est de jouer un peu avec ce simulateur pour
bien comprendre les possibilités et la puissance de flex-wrap
.
Conclusion.
Nous espérions que ce rapide tour d'horizon des flex-box vous aura donné envie de les utiliser. N'hésitez pas à étudier plus à fond les propriétés relatives au flex-box : leur souplesse et la puissance des flex-box vous aidera à résoudre de nombreux problèmes de mise en page.