Source

Fléchir

Gérez rapidement la mise en page, l'alignement et le dimensionnement des colonnes de la grille, la navigation, les composants, etc., grâce à une suite complète d'utilitaires flexibles réactifs. Pour des implémentations plus complexes, un CSS personnalisé peut être nécessaire.

Activer les comportements flexibles

Appliquez displaydes utilitaires pour créer un conteneur flexbox et transformer des éléments enfants directs en éléments flexibles. Les conteneurs et articles flexibles peuvent être modifiés davantage avec des propriétés flexibles supplémentaires.

Je suis un conteneur flexbox !
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Je suis un conteneur flexbox en ligne !
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Des variantes réactives existent également pour .d-flexet .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Direction

Définissez la direction des éléments flexibles dans un conteneur flexible avec des utilitaires de direction. Dans la plupart des cas, vous pouvez omettre la classe horizontale ici car la valeur par défaut du navigateur est row. Cependant, vous pouvez rencontrer des situations où vous deviez définir explicitement cette valeur (comme les mises en page réactives).

Utilisez .flex-rowpour définir une direction horizontale (la valeur par défaut du navigateur) ou .flex-row-reversepour démarrer la direction horizontale à partir du côté opposé.

Élément flexible 1
Élément flexible 2
Élément flexible 3
Élément flexible 1
Élément flexible 2
Élément flexible 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Utilisez .flex-columnpour définir une direction verticale ou .flex-column-reversepour démarrer la direction verticale à partir du côté opposé.

Élément flexible 1
Élément flexible 2
Élément flexible 3
Élément flexible 1
Élément flexible 2
Élément flexible 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Des variantes réactives existent également pour flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Justifier le contenu

Utilisez justify-contentles utilitaires sur les conteneurs flexbox pour modifier l'alignement des éléments flexibles sur l'axe principal (l'axe des x pour commencer, l'axe des y si flex-direction: column). Choisissez parmi start(par défaut du navigateur), end, center, betweenou around.

Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
<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>

Des variantes réactives existent également pour justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Aligner les éléments

Utilisez align-itemsles utilitaires sur les conteneurs flexbox pour modifier l'alignement des éléments flexibles sur l'axe transversal (l'axe y pour commencer, l'axe x si flex-direction: column). Choisissez parmi start, end, center, baselineou stretch(par défaut du navigateur).

Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
<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>

Des variantes réactives existent également pour align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

S'aligner

Utilisez align-selfles utilitaires sur les éléments flexibles pour modifier individuellement leur alignement sur l'axe transversal (l'axe des ordonnées pour commencer, l'axe des abscisses si flex-direction: column). Choisissez parmi les mêmes options que align-items: start, end, center, baseline, ou stretch(par défaut du navigateur).

Article flexible
Article flexible aligné
Article flexible
Article flexible
Article flexible aligné
Article flexible
Article flexible
Article flexible aligné
Article flexible
Article flexible
Article flexible aligné
Article flexible
Article flexible
Article flexible aligné
Article flexible
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Des variantes réactives existent également pour align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Remplir

Utilisez la .flex-fillclasse sur une série d'éléments frères pour les forcer à avoir des largeurs égales tout en occupant tout l'espace horizontal disponible. Particulièrement utile pour la navigation à largeur égale ou justifiée.

Article flexible
Article flexible
Article flexible
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Des variantes réactives existent également pour flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Grandir et rétrécir

Utilisez .flex-grow-*des utilitaires pour activer la capacité d'un élément flexible à se développer pour remplir l'espace disponible. Dans l'exemple ci-dessous, les .flex-grow-1éléments utilisent tout l'espace disponible possible, tout en accordant aux deux éléments flexibles restants l'espace nécessaire.

Article flexible
Article flexible
Troisième élément flexible
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Utilisez .flex-shrink-*des utilitaires pour activer la capacité d'un élément flexible à rétrécir si nécessaire. Dans l'exemple ci-dessous, le deuxième élément flexible avec .flex-shrink-1est forcé d'envelopper son contenu sur une nouvelle ligne, "rétrécissant" pour laisser plus d'espace pour l'élément flexible précédent avec .w-100.

Article flexible
Article flexible
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Des variantes réactives existent également pour flex-growet flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1

Marges automatiques

Flexbox peut faire des choses assez impressionnantes lorsque vous mélangez des alignements flexibles avec des marges automatiques. Vous trouverez ci-dessous trois exemples de contrôle d'éléments flexibles via des marges automatiques : par défaut (pas de marge automatique), en poussant deux éléments vers la droite ( .mr-auto) et en poussant deux éléments vers la gauche ( .ml-auto).

Malheureusement, IE10 et IE11 ne prennent pas correctement en charge les marges automatiques sur les éléments flexibles dont le parent a une valeur autre que la valeur par défaut justify-content. Voir cette réponse StackOverflow pour plus de détails.

Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

Avec align-items

Déplacez verticalement un élément flexible vers le haut ou le bas d'un conteneur en mélangeant align-items, flex-direction: columnet margin-top: autoou margin-bottom: auto.

Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
Article flexible
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Envelopper

Modifiez la façon dont les éléments flexibles s'enroulent dans un conteneur flexible. Choisissez entre aucun habillage (la valeur par défaut du navigateur) avec .flex-nowrap, habillage avec .flex-wrap, ou habillage inversé avec .flex-wrap-reverse.

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

Des variantes réactives existent également pour flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Ordre

Modifiez l' ordre visuel d'éléments flexibles spécifiques avec une poignée d' orderutilitaires. Nous fournissons uniquement des options pour faire un article en premier ou en dernier, ainsi qu'une réinitialisation pour utiliser la commande DOM. Comme orderprend n'importe quelle valeur entière (par exemple, 5), ajoutez un CSS personnalisé pour toutes les valeurs supplémentaires nécessaires.

Premier élément flexible
Deuxième élément flexible
Troisième élément flexible
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Des variantes réactives existent également pour order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Aligner le contenu

Utilisez align-contentles utilitaires sur les conteneurs flexbox pour aligner les éléments flexibles ensemble sur l'axe transversal. Choisissez parmi start(par défaut du navigateur), end, center, between, aroundou stretch. Pour illustrer ces utilitaires, nous avons renforcé flex-wrap: wrapet augmenté le nombre d'éléments flexibles.

La tête haute! Cette propriété n'a aucun effet sur les lignes uniques d'éléments flexibles.

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

Des variantes réactives existent également pour align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch