Bootstrap 4 Flex

Bootstrap 4 Flex

Utilisez les classes flexibles pour contrôler la disposition des composants Bootstrap 4.

Boîte flexible

La plus grande différence entre Bootstrap 3 et Bootstrap 4 est que Bootstrap 4 utilise désormais flexbox, au lieu de flottants, pour gérer la mise en page.

Le module de mise en page de boîte flexible facilite la conception d'une structure de mise en page flexible et réactive sans utiliser de flottement ou de positionnement. Si vous débutez avec flex, vous pouvez en savoir plus dans notre didacticiel CSS Flexbox .

Pour créer un conteneur flexbox et transformer des enfants directs en éléments flexibles, utilisez la d-flexclasse :

Pour créer un conteneur flexbox en ligne, utilisez la d-inline-flexclasse :

Orientation horizontale

Utilisez .flex-rowpour afficher les éléments flexibles horizontalement (côte à côte). C'est la valeur par défaut.

Astuce : Utilisez .flex-row-reverse pour aligner à droite la direction horizontale :

Direction verticale

Utilisez .flex-columnpour afficher les éléments flexibles verticalement (les uns au-dessus des autres) ou .flex-column-reverse pour inverser la direction verticale :

Justifier le contenu

Utilisez les .justify-content-*classes pour modifier l'alignement des éléments flexibles. Les classes valides sont start(par défaut) , end, ou :centerbetweenaround

Remplissage / Largeurs égales

Utilisez .flex-fillsur les éléments flexibles pour les forcer à avoir des largeurs égales :

Croître

Utilisez .flex-grow-1-le sur un élément flexible pour occuper le reste de l'espace. Dans l'exemple ci-dessous, les deux premiers éléments flexibles occupent l'espace nécessaire, tandis que le dernier élément occupe le reste de l'espace disponible :

Conseil : utilisez .flex-shrink-1-le sur un élément flexible pour le faire rétrécir si nécessaire.

Commander

Modifiez l'ordre visuel d'un ou plusieurs éléments flexibles spécifiques avec les .orderclasses. Les classes valides vont de 0 à 12, où le nombre le plus bas a la priorité la plus élevée (ordre-1 est affiché avant ordre-2, etc.) :

Marges automatiques

Ajoutez facilement des marges automatiques aux éléments flexibles avec .mr-auto(pousser les éléments vers la droite) ou en utilisant .ml-auto(pousser les éléments vers la gauche) :

Envelopper

Contrôlez la manière dont les éléments flexibles s'enroulent dans un conteneur flexible avec .flex-nowrap(par défaut) .flex-wrapou .flex-wrap-reverse.

Cliquez sur les boutons ci-dessous pour voir la différence entre les trois classes, en modifiant l'habillage des éléments flexibles dans la boîte d'exemple :

Aligner le contenu

Contrôlez l'alignement vertical des éléments flexibles rassemblés.align-content-* avec les classes. Les classes valides sont .align-content-start(par défaut) , .align-content-end, .align-content-center, et ..align-content-between.align-content-around.align-content-stretch

Remarque : Ces classes n'ont aucun effet sur les lignes uniques d'éléments flexibles.

Cliquez sur les boutons ci-dessous pour voir la différence entre les cinq classes, en modifiant l'alignement vertical des éléments flexibles dans la boîte d'exemple :

Aligner les éléments

Contrôlez l'alignement vertical de rangées uniques d'éléments flexibles avec les .align-items-* classes. Les classes valides sont .align-items-start, .align-items-end, .align-items-center, .align-items-baselineet .align-items-stretch (par défaut).

Cliquez sur les boutons ci-dessous pour voir la différence entre les cinq classes :

Aligner soi-même

Contrôlez l'alignement vertical d' un élément flexible spécifié avec les .align-self-* classes. Les classes valides sont .align-self-start, .align-self-end, .align-self-center, .align-self-baselineet .align-self-stretch (par défaut).

Cliquez sur les boutons ci-dessous pour voir la différence entre les cinq classes :

Cours flexibles réactifs

All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.

The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.