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.
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.
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div><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
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é.
<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é.
<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
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.
<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
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).
<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
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).
<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
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.
<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
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.
<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.
<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
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.
<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>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.
<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>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.
<div class="d-flex flex-nowrap">
...
</div><div class="d-flex flex-wrap">
...
</div><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
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.
<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
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.
<div class="d-flex align-content-start flex-wrap">
...
</div><div class="d-flex align-content-end flex-wrap">...</div><div class="d-flex align-content-center flex-wrap">...</div><div class="d-flex align-content-between flex-wrap">...</div><div class="d-flex align-content-around flex-wrap">...</div><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