Mise en page Flex (Flexbox) de Bootstrap5

Bootstrap5 utilise des classes flex pour contrôler la mise en page.

Flexbox

La plus grande différence entre Bootstrap 3 et Bootstrap 4/5 est que Bootstrap 4/5 utilise flexbox pour la mise en page, au lieu d'utiliser des flottants.

Flexbox est un nouveau mode de mise en page en CSS3, plus adapté au responsive design. Si vous ne comprenez pas encore flex, vous pouvez lire notreCSS3 Flexible Box (Flex Box)Tutoriel

Remarque : IE9 et les versions antérieures ne prennent pas en charge flexbox, donc si vous devez prendre en charge IE8-9, veuillez utiliserBootstrap 3。

L'exemple suivant utilise la classe d-flex pour créer un conteneur flexbox et définit trois éléments flex :

Exemple

<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary">Élément flex 3</div> </div>

Essayez-le »

Vous pouvez utiliser la classe d-inline-flex pour créer un conteneur flexbox qui s'affiche sur la même ligne :

Exemple

<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary">Élément flex 3</div> </div>

Essayez-le »

Horizontal

.flex-rowVous pouvez définir les éléments flex pour qu'ils s'affichent horizontalement, ce qui est la valeur par défaut.

Utilisez.flex-row-reversela classe est utilisée pour définir l'affichage aligné à droite, c'est-à-dire avec.flex-rowla direction opposée.

Exemple

<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary">Élément flex 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary">Élément flex 3</div> </div>

Essayez-le »

Vertical

.flex-columnla classe est utilisée pour définir les éléments flex afin qu'ils s'affichent verticalement,.flex-column-reverseutilisée pour inverser les éléments :

Exemple

<div class="d-flex flex-column"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary">Élément flex 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary">Élément flex 3</div> </div>

Essayez-le »

Justification du contenu

.justify-content-*la classe est utilisée pour modifier la disposition des éléments flex,*Les valeurs autorisées sont :start (par défaut), end, center, between ou around:

Exemple

<div class="d-flex justify-content-start">...</div> <div class="d-flex justify-content-end">...</div> <div class="d-flex justify-content-center">...</div> <div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-around">...</div>

Essayez-le »

Largeur égale

La classe .flex-fill force chaque élément flex à avoir la même largeur :

Exemple

<div class="d-flex"> <div class="p-2 bg-info flex-fill">Élément flex 1</div> <div class="p-2 bg-warning flex-fill">Élément flex 2</div> <div class="p-2 bg-primary flex-fill">Élément flex 3</div> </div>

Essayez-le »

Agrandissement

.flex-grow-1 est utilisé pour définir l'élément afin qu'il utilise l'espace restant. Dans l'exemple suivant, les deux premiers éléments n'occupent que l'espace dont ils ont besoin, et le dernier occupe l'espace restant. :

Exemple

<div class="d-flex"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary flex-grow-1">Élément flex 3</div> </div>

Essayez-le »

Astuce :Utilisez.flex-shrink-1pour définir les règles de rétrécissement des éléments.

Ordre

.orderla classe peut définir l'ordre des éléments flex, de.order-1à.order-12, plus le nombre est petit, plus le poids est élevé (.order-1est placé.order-2avant) :

Exemple

<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Élément flex 1</div> <div class="p-2 bg-warning order-2">Élément flex 2</div> <div class="p-2 bg-primary order-1">Élément flex 3</div> </div>

Essayez-le »

Marge

.ms-autola classe peut définir la marge droite de l'élément enfant surauto, i.e.,margin-right: auto!important;，.me-autola classe peut définir la marge gauche de l'élément enfant surauto, i.e.,margin-left: auto!important;:

Exemple

<div class="d-flex mb-3 bg-secondary"> <div class="p-2 ms-auto bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 bg-primary">Élément flex 3</div> </div> <div class="d-flex mb-3 bg-secondary"> <div class="p-2 bg-info">Élément flex 1</div> <div class="p-2 bg-warning">Élément flex 2</div> <div class="p-2 me-auto bg-primary">Élément flex 3</div> </div>

Essayez-le »

Wrap

Vous pouvez utiliser les trois classes suivantes pour faire passer les éléments à la ligne dans un conteneur flex : .flex-nowrap (par défaut), .flex-wrap ou .flex-wrap-reverse. Définissez le conteneur flex sur une seule ligne ou sur plusieurs lignes.

Exemple

<div class="d-flex flex-wrap">..</div> <div class="d-flex flex-wrap-reverse">..</div> <div class="d-flex flex-nowrap">..</div>

Essayez-le »

Alignement du contenu

Nous pouvons utiliser `.align-content-*` pour contrôler la façon dont les éléments enfants sont empilés verticalement. Les valeurs incluent : `.align-content-start` (par défaut), `.align-content-end`, `.align-content-center`, `.align-content-between`, `.align-content-around` et `.align-content-stretch`.

Ces classes sont inefficaces lorsqu'il n'y a qu'une seule ligne d'éléments flex.

Exemple

<div class="d-flex flex-wrap align-content-start">..</div> <div class="d-flex flex-wrap align-content-end">..</div> <div class="d-flex flex-wrap align-content-center">..</div> <div class="d-flex flex-wrap align-content-around">..</div> <div class="d-flex flex-wrap align-content-stretch">..</div>

Essayez-le »

Aligner les éléments

Pour aligner les éléments enfants sur une seule ligne, vous pouvez utiliser.align-items-*classes pour le contrôler. Les valeurs incluent :`.align-items-start`, `.align-items-end`, `.align-items-center`, `.align-items-baseline` et `.align-items-stretch` (par défaut)。

Exemple

<div class="d-flex align-items-start">..</div> <div class="d-flex align-items-end">..</div> <div class="d-flex align-items-center">..</div> <div class="d-flex align-items-around">..</div> <div class="d-flex align-items-stretch">..</div>

Essayez-le »

Alignement individuel

Pour aligner un élément enfant spécifique, vous pouvez utiliser les classes `.align-self-*` pour le contrôler. Les valeurs incluent : `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline` et `.align-self-stretch` (par défaut).

Exemple

<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">Élément flex 1</div> <div class="p-2 border align-self-start">Élément flex 2</div> <div class="p-2 border">Élément flex 3</div> </div>

Essayez-le »

Classes flex responsives

Nous pouvons définir des classes flex en fonction des différents appareils pour obtenir une mise en page réactive. Le `*` dans le tableau ci-dessous peut être `sm`, `md`, `lg` ou `xl`, correspondant aux petits appareils, aux appareils moyens, aux grands appareils et aux très grands appareils.
Classe Exemple Implémentation
Conteneurs flex
.d-*-flex Créer des conteneurs flexbox en fonction des différents appareils à écran Essayez-le
.d-*-inline-flex Créer des conteneurs flexbox en ligne en fonction des différents appareils à écran Essayez-le
Direction
.flex-*-row Afficher les éléments flex horizontalement en fonction des différents appareils à écran Essayez-le
.flex-*-row-reverse Afficher les éléments flex horizontalement et alignés à droite en fonction des différents appareils à écran Essayez-le
.flex-*-column Afficher les éléments flex verticalement en fonction des différents appareils à écran Essayez-le
.flex-*-column-reverse Afficher les éléments flex verticalement dans l'ordre inverse en fonction des différents appareils à écran Essayez-le
Justification du contenu
.justify-content-*-start Afficher les éléments flex à la position de début en fonction des différents appareils à écran (alignés à gauche) Essayez-le
.justify-content-*-end Afficher les éléments flex à la fin en fonction des différents appareils à écran (alignés à droite) Essayez-le
.justify-content-*-center Centrer les éléments flex dans le conteneur flex en fonction des différents appareils à écran Essayez-le
.justify-content-*-between Utiliser "between" pour afficher les éléments flex en fonction des différents appareils à écran Essayez-le
.justify-content-*-around Utiliser "around" pour afficher les éléments flex selon les différents appareils à écran Essayez-le
Largeur égale
.flex-*-fill Forcer une largeur égale selon les différents appareils à écran Essayez-le
Agrandissement
.flex-*-grow-0 Ne pas autoriser l'agrandissement selon les différents appareils à écran  
.flex-*-grow-1 Autoriser l'agrandissement selon les différents appareils à écran  
Rétrécissement
.flex-*-shrink-0 Ne pas autoriser le rétrécissement selon les différents appareils à écran  
.flex-*-shrink-1 Autoriser le rétrécissement selon les différents appareils à écran  
Wrap
.flex-*-nowrap Ne pas enrouler les éléments flex selon les différents appareils à écran Essayez-le
.flex-*-wrap Enrouler les éléments flex selon les différents appareils à écran Essayez-le
.flex-*-wrap-reverse Inverser l'enroulement des éléments flex selon les différents appareils à écran Essayez-le
Alignement du contenu
.align-content-*-start Empiler les éléments flex à la position de départ selon les différents appareils à écran Essayez-le
.align-content-*-end Empiler les éléments flex à la position de fin selon les différents appareils à écran Essayez-le
.align-content-*-center Empiler les éléments flex à la position centrale selon les différents appareils à écran Essayez-le
.align-content-*-around Empiler les éléments flex en utilisant "around" selon les différents appareils à écran Essayez-le
.align-content-*-stretch Empiler les éléments flex en les étirant selon les différents appareils à écran Essayez-le
Tri
.order-*-0-12 Modifier le tri sur les petits écrans Essayez-le
Alignement des éléments
.align-items-*-start Selon l'appareil à écran, afficher les éléments sur la même ligne au début. Essayez-le
.align-items-*-end Selon l'appareil à écran, afficher les éléments sur la même ligne à la fin. Essayez-le
.align-items-*-center Selon l'appareil à écran, afficher les éléments sur la même ligne au centre. Essayez-le
.align-items-*-baseline Selon l'appareil à écran, afficher les éléments de la même ligne au niveau de la ligne de base. Essayez-le
.align-items-*-stretch Selon l'appareil à écran, étirer la hauteur des éléments et les afficher sur la même ligne. Essayez-le
Alignement d'un seul élément enfant
.align-self-*-start Selon l'appareil d'écran, un élément enfant unique au début. Essayez-le
.align-self-*-end Selon l'appareil d'écran, affichez un élément enfant unique à la fin. Essayez-le
.align-self-*-center Selon l'appareil d'écran, affichez un élément enfant unique au centre. Essayez-le
.align-self-*-baseline Selon l'appareil d'écran, afficher un seul élément enfant sur la ligne de base. Essayez-le
.align-self-*-stretch Selon l'appareil d'écran, étirer un seul élément enfant. Essayez-le
Autres extensions