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 display
des 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">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
Des variantes réactives existent également pour .d-flex
et .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-row
pour définir une direction horizontale (la valeur par défaut du navigateur) ou .flex-row-reverse
pour démarrer la direction horizontale à partir du côté opposé.
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
Utilisez .flex-column
pour définir une direction verticale ou .flex-column-reverse
pour démarrer la direction verticale à partir du côté opposé.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">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-content
les 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
, between
ou around
.
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-items
les 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
, baseline
ou stretch
(par défaut du navigateur).
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-self
les 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).
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
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">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">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: column
et margin-top: auto
ou margin-bottom: auto
.
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">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
.
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' order
utilitaires. 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 order
prend 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">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">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-content
les 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
, around
ou stretch
. Pour illustrer ces utilitaires, nous avons renforcé flex-wrap: wrap
et 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.
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