Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Les flex-box (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.

1
2
3

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.

1
2
3

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.

flex-direction :
row
row-reverse
column
column-reverse
1
2
3

 

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 par flex-direction. Le plus souvent ce sera l'axe horizontal.
  • align-content et align-items: gèrent l'alignement des enfants suivant l'axe secondaire, la plupart du temps ce sera l'axe vertical. Utilisez align-content si le container flex comporte plusieurs lignes et align-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.

justify-content :
flex-start
flex-end
center
space-between
space-around
1
2
3

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.

flex-wrap :
nowrap
wrap
wrap-reverse
1
2
3
4
5
6

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.

Voir aussi...

Flex-box - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • display : Type de l'élément et la façon de l'afficher.
  • flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
  • flex-flow : Echaînement des éléments enfant dans un flex-box.
  • flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
  • flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • order : Ordre des éléments dans un flex-box.