Bootstrap 5 et la mise en page Flexbox

Bootstrap 5 et la mise en page Flexbox

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.

Maîtriser Flexbox

Table des matieres

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 :

Utiliser Flexbox avec Bootstrap

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 horizontale des éléments en utilisant Flexbox et Bootstrap

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 la direction verticale des éléments en utilisant Flexbox et Bootstrap

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 horizontal des éléments en utilisant Flexbox et Bootstrap
Changer l’alignement horizontal des éléments en utilisant Flexbox et Bootstrap

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.

L’alignement vertical des éléments avec la classes align-items

align-items-end – permets d’aligner verticalement les éléments en bas à gauche de leur conteneur.

Bootstrap : L’alignement vertical avec la classe align-items-end

align-items-center – permet d’aligner verticalement les éléments au milieu de leur conteneur.

Bootstrap : L’alignement vertical avec la classe align-items-center

align-items-baseline – permet d’aligner verticalement les éléments par rapport à la ligne de base de l’axe vertical.

Bootstrap : L’alignement vertical avec la classe align-items-baseline

align-items-stretch – permet d’étirer verticalement les éléments sur toute la hauteur de leur conteneur.

Bootstrap : L’alignement vertical avec la classe align-items-stretch

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.

Bootstrap flex-wrap

Si l’on souhaite que les éléments retournent à la ligne lorsqu’ils ont rempli le conteneur, nous devons utiliser la classe flex-wrap.

Bootstrap flex-wrap

Si on utiliser la classe flex-wrap-reverse on inverse la direction des éléments.

Bootstrap flex-wrap-reverse

*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.

Le fonctionnement de la classe align-content avec bootstrap 5

Si je n’avais pas ajouté la classe flex-wrap voici ce que cela aurait donné comme résultat.

Le fonctionnement de la classe align-content avec bootstrap 5

align-content-center – va positionner une ligne d’éléments au centre de son conteneur.

L’alignement vertical des elements avec bootstrap 5

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.

L’alignement vertical des elements avec bootstrap 5

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.

L’alignement vertical des elements avec bootstrap 5

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.

Bootstrap align-content-around alignement vertical des elements

En rétrécissant l’écran, on peut voir qu’une troisième ligne se crée automatiquement.

Bootstrap align-content-around alignement vertical des elements

align-content-stretch – les lignes s’étirent de façon à occuper tout l’espace disponible.

Bootstrap align-content-stretch alignement vertical des elements

Si l’on agrandit la taille de l’écran :

Bootstrap align-content-stretch alignement vertical des elements

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.

Bootstrap 5 : L’alignement vertical des éléments avec la classe align-self

align-self-end – positionne l’élément en bas de son conteneur.

Bootstrap 5 : L’alignement vertical des éléments avec la classe align-self

align-self-center – positionne l’élément au centre de son conteneur.

Bootstrap 5 : L’alignement vertical des éléments avec la classe align-self

align-self-baseline – positionne l’élément par rapport à la ligne de base.

Bootstrap 5 : L’alignement vertical des éléments avec la classe align-self

align-self-stretch – positionnement par défaut de l’élément.

Bootstrap 5 : L’alignement vertical des éléments avec la classe align-self

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.

Bootstrap 5 L’alignement horizontal avec les marges automatiques droites et gauches.

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).

Bootstrap 5 L’alignement horizontal avec les marges automatiques droite et gauche.

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.

Bootstrap 5 L’alignement vertical des éléments avec les marges automatiques haute et basse

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.

Bootstrap 5 L’alignement vertical des éléments avec les marges automatiques haute et basse

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.

Changer l’ordre des éléments avec Flexbox et Bootstrap

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.

Changer l’ordre des éléments avec Flexbox et Bootstrap

En dessous de 768px (md)

Changer l’ordre des éléments avec Flexbox et Bootstrap

A partir de 768px

Changer l’ordre des éléments avec Flexbox et Bootstrap

É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.

Bootstrap 5 Etendre la largeur d’un élément avec la classe flex-fill

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>

Bootstrap 5 Etendre la largeur d’un élément avec la classe flex-fill

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.

Bootstrap 5 Etendre la largeur d’un élément avec la classe flex-fill
Bootstrap 5 Etendre la largeur d’un élément avec 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.
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0