Flex Bootstrap 5

Cadre élastique

La plus grande différence entre Bootstrap 3 et Bootstrap 4 & 5 réside dans le fait que Bootstrap 5 utilise maintenant le flexbox plutôt que les浮动 pour traiter les mises en page.

Le module de mise en page en boîte élastique, qui permet de concevoir plus facilement des structures de mise en page responsive élastiques sans utiliser de浮动 ou de positionnement.

Si vous n'êtes pas familier avec flex, vous pouvez consulter nos Tutoriel CSS Flexbox apprendre.

Remarque :IE9 et les versions antérieures ne prennent pas en charge Flexbox.

Remarque :Si vous avez besoin de la prise en charge de IE8-9, utilisez Bootstrap 3. C'est la version la plus stable de Bootstrap, l'équipe continue de le soutenir pour les corrections d'erreurs critiques et les modifications de documentation. Cependant, aucune nouvelle fonctionnalité ne sera ajoutée.

Exemple

Pour créer un conteneur flexbox et convertir directement les éléments enfants en éléments flex, utilisez d-flex Classe :

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

Essayer personnellement

Exemple

Pour créer un conteneur flexbox en ligne, utilisez d-inline-flex Classe :

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

Essayer personnellement

Direction horizontale

Veuillez utiliser .flex-row Afficher les éléments élastiques en direction horizontale (côte à côte). C'est la configuration par défaut.

<div class="p-2 bg-primary flex-grow-1">Élément élastique 3</div>Marge automatique .flex-row-reverse Aligner à droite en direction horizontale :

Exemple

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

Essayer personnellement

Direction verticale

Veuillez utiliser .flex-column Afficher les éléments flex en direction verticale (empilés les uns sur les autres), ou utiliser .flex-column-reverse Inverser la direction verticale :

Exemple

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

Essayer personnellement

Aligner le contenu

Marge automatique .justify-content-* La classe peut modifier l'alignement des éléments élastiques. Les classes valides sont : :

  • start(par défaut)
  • end
  • center
  • between
  • 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>

Essayer personnellement

Largeur égale

Astuce : .flex-fill Ils peuvent être obligés d'avoir la même largeur :

Exemple

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

Essayer personnellement

Étendre

Astuce : .flex-grow-1 L'espace supplémentaire peut être utilisé. Dans l'exemple suivant, les deux premiers éléments flex occupent l'espace nécessaire, tandis que le dernier élément occupe l'espace disponible restant :

Exemple

<div class="d-flex">
  <div class="p-2 bg-info">Élément élastique 1</div>
  <div class="p-2 bg-warning">Élément élastique 2</div>
  
弹性项目 3

</div>

Essayer personnellement

<div class="p-2 bg-primary flex-grow-1">Élément élastique 3</div>Astuce : Utiliser sur les éléments flex .flex-shrink-1

Ordre

Marge automatique Peut le faire se rétrécir si nécessaire. .order

Exemple

<div class="d-flex bg-secondary">
  Les classes peuvent modifier l'ordre visuel d'un élément flex spécifique. Les classes valides varient de 0 à 5, où le plus petit nombre a la priorité la plus élevée (order-1 s'affiche avant order-2, etc.) :
  <div class="p-2 bg-info order-3">Élément élastique 1</div>
  <div class="p-2 bg-warning order-2">Élément élastique 2</div>
</div>

Essayer personnellement

<div class="p-2 bg-primary order-1">Élément élastique 3</div>

Marge automatique .ms-autoou utiliser .me-autoPour ajouter facilement des marges automatiques aux éléments flex, vous pouvez utiliser :

Exemple

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

Essayer personnellement

Retourner les lignes

En utilisant .flex-nowrappar défaut,.flex-wrap ou .flex-wrap-reverseIl permet de contrôler comment les éléments flex s'enroulent dans le conteneur flex.

Exemple

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

Essayer personnellement

Aligner le contenu

Veuillez utiliser .align-content-* Contrôle l'alignement vertical des éléments élastiques. Les classes valides sont :

  • .align-content-start(par défaut)
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch

Remarque :Ces classes n'ont pas d'effet sur les éléments élastiques en ligne unique.

Cliquez sur le bouton suivant pour voir la différence entre les cinq classes en changeant l'alignement vertical des éléments élastiques dans le cadre d'exemple :

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>

Essayer personnellement

Aligner les éléments

Veuillez utiliser .align-items-* Contrôle de classeLigne uniqueLa méthode d'alignement vertical des éléments élastiques. Les classes valides sont :

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch(par défaut)

Cliquez sur le bouton suivant pour voir la différence entre les cinq classes :

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-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

Essayer personnellement

Alignement personnel

Veuillez utiliser .align-self-* Contrôle de classeSpécifier l'élément élastiqueLa méthode d'alignement vertical.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch(par défaut)

Cliquez sur le bouton suivant pour voir la différence entre les cinq classes :

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>

Essayer personnellement

Classes Flex responsives

Toutes les classes élastiques comportent des classes de réponse supplémentaires, ce qui rend facile de définir une classe élastique spécifique pour une taille d'écran spécifique.

* peut être remplacé par sm, md, lg, xl ou xxl, représentant respectivement petit, moyen, grand, très grand et extra grand écran.

Recherche une classe élastique spécifique ..

Classe Description Exemple
Conteneur élastique
.d-*-flex Crée un conteneur flexbox pour différents écrans. Essayer
.d-*-inline-flex Crée un conteneur flexbox inline pour différents écrans. Essayer
Direction
.flex-*-row Affiche horizontalement les éléments élastiques sur différents écrans. Essayer
.flex-*-row-reverse Affiche horizontalement et à droite les éléments élastiques sur différents écrans. Essayer
.flex-*-column Affiche verticalement les éléments élastiques sur différents écrans. Essayer
.flex-*-column-reverse Affiche verticalement les éléments élastiques dans un ordre inverse sur différents écrans. Essayer
Contenu aligné
.justify-content-*-start Affiche les éléments élastiques à partir du début (à gauche) sur différents écrans. Essayer
.justify-content-*-end Affiche les éléments élastiques à la fin (à droite) sur différents écrans. Essayer
.justify-content-*-center Affiche les éléments élastiques au centre du conteneur élastique sur différents écrans. Essayer
.justify-content-*-between Affiche équitablement les éléments élastiques sur différents écrans. Essayer
.justify-content-*-around Affiche les éléments élastiques 'autour' sur différents écrans. Essayer
Remplissage / Largeur égale
.flex-*-fill Force les éléments élastiques à avoir une largeur égale sur différents écrans. Essayer
Extension
.flex-*-grow-0 Ne pas permettre aux éléments de s'étendre sur différents écrans.
.flex-*-grow-1 Fait que les éléments s'étendent sur différents écrans.
Rétrécissement
.flex-*-shrink-0 Ne pas faire rétrécir les éléments sur différents écrans.
.flex-*-shrink-1 Faire rétrécir les éléments sur différents écrans.
Ordre
.order-*-0-12 Changer l'ordre de 0 à 12 sur les petits écrans. Essayer
Retourner les lignes
.flex-*-nowrap Ne pas retourner les lignes des éléments sur différents écrans. Essayer
.flex-*-wrap Retourner les lignes des éléments sur différents écrans. Essayer
.flex-*-wrap-reverse Inverser le retournement des lignes des éléments sur différents écrans. Essayer
Aligner le contenu
.align-content-*-start Aligner les éléments à partir du début des différents écrans. Essayer
.align-content-*-end Aligner les éléments à la fin des différents écrans. Essayer
.align-content-*-center Aligner les éléments au centre des différents écrans. Essayer
.align-content-*-around Aligner les éléments autour des différents écrans. Essayer
.align-content-*-stretch Étendre les éléments sur différents écrans. Essayer
Aligner les éléments
.align-items-*-start Aligner les éléments en ligne à partir du début des différents écrans. Essayer
.align-items-*-end Aligner les éléments en ligne à la fin des différents écrans. Essayer
.align-items-*-center Aligner les éléments en ligne au centre des différents écrans. Essayer
.align-items-*-baseline Aligner les éléments en ligne sur les lignes de base des différents écrans. Essayer
.align-items-*-stretch Étendre les éléments en ligne sur différents écrans. Essayer
Aligner soi-même
.align-self-*-start Aligner les éléments flexibles à partir du début des différents écrans. Essayer
.align-self-*-end Aligner les éléments flexibles à la fin des différents écrans. Essayer
.align-self-*-center Aligner les éléments flexibles au centre des différents écrans. Essayer
.align-self-*-baseline Aligner les éléments flexibles sur les lignes de base des différents écrans. Essayer
.align-self-*-stretch Étendre les éléments flexibles sur différents écrans. Essayer