Classes Flexbox dans Bootstrap 5 | Expliqué

Flexion est un module de mise en page unidimensionnel qui est utilisé pour aligner les éléments et gérer les espaces entre les éléments dans une seule direction uniquement en rangées ou en colonnes. Le conteneur sur lequel le .d-flex La classe est appliquée est appelée un conteneur flexible et tous les éléments ou éléments du conteneur sont appelés éléments flex.La direction de la ligne dans Flexbox est appelée axe principal et la direction de la colonne est appelée axe transversal.

Cet article concerne les classes Flex dans Bootstrap 5 et les points suivants sont discutés dans

• Conteneurs Flexbox
• Directions Flexbox
• Justifier le contenu
• Aligner les éléments
• Cours d'emballage
• Aligner soi

Bootstrap 5 Classes Flex

D-flex

Dans Bootstrap 5, des conteneurs flexibles sont créés en utilisant le .d-flex classe. d-flex Le conteneur de classe s'étend à la pleine largeur, ce qui signifie qu'il s'étend à la largeur de l'écran, mais l'élément en informatique se développe en fonction de leur contenu.

Code

Box1
Box2
Box3
BOX4

.D - * - Flex est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

D-inline-flex

Dans Bootstrap 5, des conteneurs flexibles sont créés en utilisant le .d-inline-flex classe. d-inline-flex Le conteneur de classe s'étend en fonction du nombre d'éléments et des éléments de zone de contenu qui y sont couverts.

Code

Box1
Box2
Box3
BOX4

.D - * - en ligne-flex est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Directions flexibles

Flex-row-reverse

.flex-row-reverse La classe est utilisée pour modifier la direction des éléments à l'envers. Cette classe Flexbox n'est utilisée qu'avec le .ligne classe. Cette classe sera également utilisée avec différents points d'arrêt

Code

Box1
Box2
Box3
BOX4

.Flex - * - Row-Reverse est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Colonne de flexion

.colonne de flexion La classe est utilisée pour convertir les lignes en colonnes. Cette classe est également utilisée avec le .ligne classe.

Code

Box1
Box2
Box3
BOX4

.flex - * - colonne est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Flex-colonne-revers

.flex-colonne-revers classe, convertir les lignes en colonnes et modifier également la direction des éléments flexibles à l'envers. Cette classe est également utilisée avec .ligne classe.

Code

Box1
Box2
Box3
BOX4

.flex - * - colonne-reverse est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Se dérober à la flexion

.se dérober à la flexion La classe est utilisée pour envelopper les éléments à l'intérieur du conteneur et avec cette classe, le débordement des éléments Flex est géré. Par défaut, les éléments sont enveloppés, mais vous pouvez toujours utiliser cette classe pour envelopper les éléments qui
déborde le conteneur flex.

Code

Box1
Box2
Box3
BOX4

.flex - * - envelopper est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Flex-nowrap

.flex-nowrap La classe est utilisée où vous ne voulez pas que vos articles flexibles soient enveloppés car par défaut, les éléments flexibles sont enveloppés à l'intérieur du conteneur Flex en raison de son comportement réactif afin que vous puissiez utiliser la classe Flex-Nowrap.

Code

Box1
Box2
Box3
BOX4

.Flex - * - Nowrap est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Flex-wrap-reverse

.flex-wrap-reverse La classe est non seulement utilisée pour envelopper des éléments flexibles dans un conteneur, mais aussi inverser leur commande.

Code

Box1
Box2
Box3
BOX4

.flex - * - wrap-reverse est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Flexion

.flexion La classe est uniquement utilisée avec le .CLASSE COL sans point de rupture ni largeur. La classe Flex-Fill prend la largeur à 100% du conteneur et force les autres éléments flexibles pour diviser l'espace également. La classe Flex-Fill peut être appliquée sur plusieurs éléments flexibles et uniquement sur les éléments flexibles.

Code

Box1
Box2
Box3
BOX4

.flex - * - remplir est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Justifier le contenu

Les classes de justifier sont utilisées pour justifier les éléments flexibles dans la direction d'une ligne ou en d'autres termes le long de l'axe principal.

Justifier-contenu

.justifier-contenu classe, déplace les éléments flexibles sur le côté gauche du conteneur. Cette classe n'est utilisée qu'avec le .Classe D-FLEX.

Code

Box1
Box2
Box3
BOX4
BOX5

.justifier-contenu - * - commencer est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Justifier

.justifier classe, déplace les éléments flexibles sur le côté droit du conteneur. Cette classe n'est utilisée qu'avec le .d-flex classe.

Code

Box1
Box2
Box3
BOX4
BOX5

.justifier-contenu - * - fin est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Justifier-contenu-centre

.justifier-contenu-centre classe, rassemblez tous les articles flexibles au centre du conteneur. Cette classe n'est utilisée qu'avec le .d-flex classe.

Code

Box1
Box2
Box3
BOX4
BOX5

.justifier-contenu - * - Centre est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Justifier-contenu entre les deux

.justifier-contenu entre les deux La classe est utilisée pour placer des espaces entre les éléments flexibles. Cette classe place le premier élément Flex au début du conteneur et le dernier élément flexible à la fin du conteneur et divise tout l'espace également entre les éléments flexibles restants .Cette classe n'est utilisée qu'avec le .d-flex classe.

Code

Box1
Box2
Box3
BOX4
BOX5

.justifier-contenu - * - entre est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Justifier-contenu

.justifier-contenu La classe est utilisée pour diviser l'espace également entre tous les éléments flexibles. Cette classe n'est utilisée qu'avec le .d-flex classe.

Code

Box1
Box2
Box3
BOX4
BOX5

.justifier-contenu - * - autour est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Aligner le contenu

Aligner les classes de contenu sont utilisées pour aligner le contenu dans la direction de la colonne ou en d'autres termes le long de l'axe croisé uniquement. Pour aligner les éléments flexibles, utilisez le .Classe D-FLEX avec le .se dérober à la flexion classe.

Align-Items-Start

.Align-Items-Start classe, alignez les éléments flexibles en haut du conteneur.

Code

Box1
Box2
Box3
BOX4
BOX5
Box6
Box7
Box8
Box9
BOX10
BOX11
BOX12

.Align-Items - * - Start est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Align-items-end

.align-items-end classe, alignez les éléments flexibles au bas du conteneur.

Code

Box1
Box2
Box3
BOX4
BOX5
Box6
Box7
Box8
Box9
BOX10
BOX11
BOX12

.Align-Items - * - fin est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Align-Items-Center

.Align-Items-Center classe, centrée verticale les éléments flexibles dans un conteneur.

Code

Box1
Box2
Box3
BOX4
BOX5
Box6
Box7
Box8
Box9
BOX10
BOX11
BOX12

.Align-Items - * - Centre est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Align-Items-Baseline

.Align-Items-Baseline classe, alignez le contenu dans les cases en fonction de l'axe principal en raison des éléments du conteneur s'alignent automatiquement dans la direction verticale.

Code

Box1
Box2
Box3
BOX4
BOX5
Box6
Box7
Box8

.Align-Items - * - BASELINE est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Aligner les éléments
.aligner les éléments classe, élargissez les éléments flexibles verticalement en fonction de la hauteur du conteneur.

Code

Box1
Box2
Box3
BOX4

.Align-Items - * - Stretch est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend cette classe réactive pour d'autres écrans également.

Aligner soi

.s'aligner La classe est juste comme .align-items classe mais la différence entre les deux classes est .Align-Items est appliqué sur le conteneur Flex et traite tous les éléments flexibles avec la même classe que celle utilisée par le conteneur flex .s'aligner La classe est appliquée sur un seul élément Flex et traite un seul élément flex.

Voici le .Aligner les classes de soi qui sont utilisées sur les éléments flexibles

• .Aligner-SET-START
• .s'aligner
• .aligner le centre-soi
• .Aligner l'auto-bascule
• .s'aligner

.Align-self - * - démarrage / fin / centre / ligne de base / extension est également utilisé avec des points d'arrêt ne remplacez que le (*) symbole avec xxl, xl, lg, md ou sm. L'utilisation de points d'arrêt rend ces classes réactives pour d'autres écrans également.

Conclusion

Les classes Flexbox sont utilisées avec la classe D-Flex dans Bootstrap 5 pour justifier, aligner et gérer le contenu en lignes ou en colonnes. Dans l'article ci-dessus, les classes de conteneurs Flex, les classes de directions flexibles, les classes d'emballage, les classes de justification flexibles pour justifier les éléments d'affilée, flexion d'alignement des classes pour aligner le contenu dans la colonne et les classes pour aligner les éléments lui-même sont discutés en détail.