L’un des grands atouts de Bootstrap 5 est l’utilisation du système de mise en page Flexbox en lieu et place des floats.
La mise en page avec Flexbox facilite grandement la conception de page responsive et le positionnement des éléments.
Si vous n’êtes pas familier avec le système Flexbox vous pouvez consulter les cours sur Flexbox dans la section HTML / CSS du site.
Les classes que nous allons voir dans cette leçon :
- d-flex
- flex-row
- flex-row-reverse
- flex-column
- flex-column-reverse
- justify-content
- align-content
- align-items
- flex-wrap
- align-self
- order
- flex-fill
- flex-grow
- flex-shrink
Utiliser Flexbox avec Bootstrap
Pour utiliser la mise en page Flexbox avec Bootstrap on doit créer une division <div> contenant la classe d-flex.
Cette division est dite parente, cela signifie que ses éléments enfants (tous les éléments qui se trouvent à l’intérieur de la division) vont être transformés en élément flex.
<div class= »d-flex« >Je suis une division qui utilise Flexbox</div>
Exemple :
Changer la direction horizontale des éléments en utilisant Flexbox et Bootstrap
Pour changer la direction des éléments avec Flexbox, nous allons utiliser des classes Bootstrap.
Attention ! Nous parlons ici, de direction pas d’alignement.
Bien que dans la plupart des cas la direction par défaut commence à gauche et ne nécessite pas d’être précisé, on peut néanmoins rencontrer des situations ou c’est nécessaire. Dans un tel cas, nous allons utiliser la classe flex-row.
<div class= »d-flex flex-row« >
Pour aligner les éléments à droite nous utiliserons la classe flex-row-reverse.
<div class= »d-flex flex-row-reverse« >
Changer la direction verticale des éléments en utilisant Flexbox et Bootstrap
Pour changer la direction verticale des éléments avec Flexbox on va cette fois-ci utiliser la classe flex-column et si l’on veut inverser la direction verticale on va utiliser la classe flex-column-reverse.
Changer l’alignement horizontal des éléments en utilisant Flexbox et Bootstrap
Nous venons de voir comment changer la direction des éléments voyons maintenant comment changer leur alignement horizontal.
Pour changer l’alignement horizontal des éléments, nous allons utiliser la classe justify-content-*.
Nous avons déjà vu cette classe dans la leçon sur l’alignement horizontal des éléments avec Bootstrap 5.
justify-content-start – alignement à gauche (valeur par défaut).
justify-content-end – alignement à droite.
justify-content-center – alignement au centre.
justify-content-between – les éléments vont être répartis équitablement sur la rangée. Le premier élément va être collé au début de la rangée tandis que le dernier élément va être collé à la fin de la rangée.
justify-content-around – les éléments, comme avec la classe justify-content-between, vont être répartis équitablement sur la rangée. Mais la différence est que même les éléments situés au début et à la fin de la rangée vont posséder des marges des deux côtés.
justify-content-evenly – semblable à justify-content-around, hormis que l’espacement de gauche du premier élément et l’espacement de droite du dernier élément sera identique aux espaces entre les éléments du milieu.
Changer l’alignement vertical des éléments en utilisant Flexbox et Bootstrap
Pour contrôler l’alignement vertical des éléments avec Flexbox, nous allons utiliser plusieurs sortes des classes différentes.
- align-items
- align-content
- align-self
Ces trois sortes de classes amènent beaucoup de confusion et pour être honnête ne sont pas simples à expliquer de façon claire autrement qu’en passant par des exemples.
Pour bien illustrer ces classes, j’ai défini une hauteur de 300px au conteneur contenant les éléments.
L’alignement vertical des éléments avec la classes align-items
La classes align-items permet d’aligner verticalement tous les éléments contenus sur une ligne à l’intérieur de leur conteneur,
En cela elle se rapproche de la classe jutify-content qui permettent d’aligner les éléments sur l’axe horizontal de leur conteneur.
Dans les exemples suivant le conteneur est une division <div>.
align-items-start – est l’alignement vertical des éléments par défaut, il positionne les éléments en haut à gauche du conteneur.
align-items-end – permets d’aligner verticalement les éléments en bas à gauche de leur conteneur.
align-items-center – permet d’aligner verticalement les éléments au milieu de leur conteneur.
align-items-baseline – permet d’aligner verticalement les éléments par rapport à la ligne de base de l’axe vertical.
align-items-stretch – permet d’étirer verticalement les éléments sur toute la hauteur de leur conteneur.
L’alignement vertical des éléments avec la classe align-content
Nous venons de voir que la classe align-items permet de définir l’alignement de tous les éléments d’une ligne à l’intérieur d’un conteneur.
La classe align-content agit différemment en permettant d’aligner les différentes lignes orchestrées par la classe flex-wrap.
La classe flex-wrap étant indispensable au fonctionnement de la classe align-content je vais vous expliquer son fonctionnement tout de suite avant d’aller plus loin.
La classe flex-wrap
Par défaut, Flexbox essaye d’afficher tous les éléments sur une même ligne quitte à créer une ligne de défilement horizontal.
Si l’on souhaite que les éléments retournent à la ligne lorsqu’ils ont rempli le conteneur, nous devons utiliser la classe flex-wrap.
Si on utiliser la classe flex-wrap-reverse on inverse la direction des éléments.
*A noter que la classe flex-nowrap est équivalente au comportement par défaut des éléments.
Le fonctionnement de la classe align-content
Nous venons de voir que la classe flex-wrap permettait un retour à la ligne des éléments et de fait créer de nouvelles lignes.
C’est ici que la classe align-content intervient en permettant de définir l’alignement vertical des lignes générées par flex-wrap et non plus l’alignement vertical des éléments contenus sur une ligne.
L’alignement vertical des lignes se fait lui aussi par rapport à son conteneur parent, dans notre exemple une division <div> Flexbox (d-flex).
align-content-start – est le positionnement par défaut.
align-content-end – va positionner une ligne d’éléments en bas de son conteneur.
Si je n’avais pas ajouté la classe flex-wrap voici ce que cela aurait donné comme résultat.
align-content-center – va positionner une ligne d’éléments au centre de son conteneur.
align-content-between – va positionner la première ligne d’éléments en haut de son conteneur, puis lors du retour à la ligne, positionner la seconde ligne d’éléments, qui se crée automatiquement, en bas du conteneur.
Si j’agrandis la taille de l’écran, on voit fort logiquement que la première ligne contient plus d’éléments avant de retourner à la ligne.
align-content-around – les lignes sont cette fois-ci reparties de manière équitable sur tout le conteneur et possèdent un espacement identique entre elles.
En rétrécissant l’écran, on peut voir qu’une troisième ligne se crée automatiquement.
align-content-stretch – les lignes s’étirent de façon à occuper tout l’espace disponible.
Si l’on agrandit la taille de l’écran :
Align-item vs align-content
En résumé, vous devez utiliser :
Les classes align-items-* lorsque dans un même conteneur il n’y a qu’une seule ligne d’éléments à aligner.
Les classes align-content-* lorsque dans un même conteneur il y a plusieurs lignes d’éléments à aligner.
L’alignement vertical des éléments avec la classe align-self
La classe align-self possède les mêmes propriétés que la classe align-items mais s’utilise pour aligner les éléments indépendamment les uns des autres à l’intérieur de leur conteneur parent.
La classes align-self s’intègre à l’élément que l’on veut aligner.
align-self-start – positionne l’élément au début de l’axe vertical.
align-self-end – positionne l’élément en bas de son conteneur.
align-self-center – positionne l’élément au centre de son conteneur.
align-self-baseline – positionne l’élément par rapport à la ligne de base.
align-self-stretch – positionnement par défaut de l’élément.
Déplacer les éléments grâce aux marges automatiques avec Flexbox et Bootstrap
Les marges automatiques permettent, elles aussi, d’affiner le positionnement des éléments dans un conteneur flexible (d-flex).
Voir la leçon : Créer des marges avec Bootstrap 5.
L’alignement horizontal avec les marges automatiques droites et gauches
Pour l’alignement horizontal des éléments avec des marges automatiques, nous pouvons utiliser les marges droite (me-auto) et gauche (ms-auto).
Exemple :
Créons une ligne contenant 4 éléments et poussons (alignons) les deux derniers tout à droite.
Comme vous pouvez le constater en définissant une marge automatique droite à l’élément 2 on repousse les éléments suivants sur la droite.
Reprenons nos 4 éléments et définissons une marge gauche (ms) au dernier élément (4).
L’élément vient se positionner tout à droite ou si vous préférez, repousse tous les autres éléments avant lui vers sa gauche.
L’alignement vertical des éléments avec les marges automatiques haute et basse
L’alignement vertical des éléments par le biais de marges automatiques hautes et basses ne peut se faire que sur un conteneur contenant la classe align-items et flex-column.
Exemple :
Créons une marge basse (margin-bottom –mb) sur notre premier élément pour repousser les suivants en bas du conteneur.
Plaçons maintenant une marge haute sur le second élément pour positionner les 3 derniers éléments en bas du conteneur tout en maintenant le premier en haut.
Comme vous pouvez le voir, les marges automatiques sont un moyen facile de changer le positionnement des éléments à l’intérieur de leur conteneur.
Changer l’ordre des éléments avec Flexbox et Bootstrap
Pour changer l’ordre des éléments avec Flexbox nous allons utiliser la classe order avec une valeur allant de 0 à 5.
Il est aussi possible de changer l’ordre des éléments à partir un point de transition.
Par exemple, imaginons que nous souhaitons changer l’ordre des éléments qu’à partir d’une taille d’écran de 768px (md). C’est très simple, on va simplement rajouter la classe md a la classe order.
En dessous de 768px (md)
A partir de 768px
Étendre la largeur d’un élément avec la classe flex-fill
La classe flex-fill va permettre d’étendre un élément sur tout l’espace laissé libre sur une ligne.
Reprenons notre ligne avec ses 4 éléments.
On le voit, il reste encore beaucoup d’espace libre après le dernier élément. Maintenant, disons que nous voulons agrandir l’élément 2 pour qu’il vienne en occuper tout l’espace restant.
Pour ce faire, nous allons lui rajouter la classe flex-fill.
<div class= »p-2 border flex-fill« >Elément 2</div>
Bien entendu, cet espace est moindre lorsqu’on rétrécie la taille de l’écran.
A noter que vous pouvez ajouter un point de transition à la classe flex-fill pour gérer l’espace selon la résolution d’écran.
<div class= »p-2 border flex-md-fill« >Elément 2</div>
Rien ne vous empêche d’utiliser la classe flex-fill sur plusieurs éléments d’une même ligne. Auquel cas la largeur disponible sera répartie de façon équitable en prenant en compte la largeur du contenu de chaque élément contenant la classe flex-fill.
Etendre ou rétrécir la largeur d’un élément avec les classes flex-grow et flex-shrink
Très proche de la flex-fill, la classe flex-grow permet d’étendre un élément pour remplir l’espace laissé vacant sur une ligne.
Cette classe peut prendre deux valeurs différentes :
- flex-grow-0: l’élément ne peut pas s’étendre pour occuper l’espace restant disponible (valeur par defaut).
- flex-grow-1: l’élément peut s’étendre pour occuper l’espace restant disponible.
La classe flex-shrink détermine si un élément peut se rétrécir ou pas.
- flex-shrink-0: l’élément ne peut pas se rétrécir.
- flex-shrink-1: l’élément peut se rétrécir.
