CSS - meilleure façon de régler la distance entre les éléments Flexbox

Il existe deux méthodes les plus couramment utilisées pour définir la distance entre les éléments Flexbox, I.e., L'utilisation de la propriété CSS de justification-contenu avec la propriété spatiale et avec la propriété spatiale entre. Quand le "justifier"La propriété CSS est définie sur"spatial», Il ajoute de l'espace autour de chaque élément Flexbox de l'élément HTML. Cependant, lorsque sa valeur est définie comme «l'espace entre», Il ajoute de l'espace entre les éléments de l'élément HTML.

Cet article démontrera l'utilisation des valeurs «spatial-aound» et «spatial entre les« justifier »dans le but d'ajouter des espaces entre les éléments Flexbox.

Comment régler la distance entre les éléments Flexbox?

La syntaxe pour définir le «justifier«Pour définir de l'espace autour et entre les éléments Flexbox, c'est le suivant:

Justify-Content: Space-Asound; justifier-contenu: espace-intermédiaire;

Préalable: création d'éléments Flexbox

Pour définir la distance entre les éléments Flexbox, il est d'abord nécessaire pour créer un Flexbox avec les éléments Flexbox, puis appliquer les propriétés CSS dessus.

Exemple

Ajoutons un élément de conteneur Div pour créer le Div principal, puis quelques éléments Div à l'intérieur pour créer les éléments Flexbox:

UN
B
C
D

Dans l'extrait de code ajouté ci-dessus:

• UN "div«L'élément de conteneur a été ajouté avec la classe déclarée«fléchir".
• À l'intérieur, quatre autres éléments de conteneurs div sont ajoutés chacun avec le nom de classe déclaré «article".
• Les éléments div ont le texte "UN","B","C" et "D"Écrit sur eux.

L'élément de style CSS contiendra certaines propriétés pour faire un meilleur affichage des éléments Flexbox:

.fléchir

Affichage: flex;
hauteur: 50vh;
Align-Items: Centre;

.article

Largeur: 40px;
hauteur: 40px;
Color d'arrière-plan: PowderBlue;
Texte-aligne: Centre;
rembourrage: 25px;

Dans l'extrait de code ci-dessus, les propriétés CSS suivantes ont été ajoutées:

• Le "afficher«La propriété a été définie comme«fléchir«Pour aligner correctement le texte à l'intérieur du conteneur div.
• Le "hauteur«La propriété a été définie sur«50VH”Pour régler la longueur verticale de l'élément de conteneur Div.
• Le "align-items»La propriété est définie comme centrée pour aligner l'élément div au centre.
• Après le ".fléchir«Sélecteur de classe, le«.article"Le sélecteur de classes est ajouté qui a les propriétés CSS pour les éléments dans le conteneur Div principal.
• Le "largeur«La propriété est définie comme«40px”Pour définir la longueur horizontale de chacun des éléments Flexbox.
• Le "hauteur«Des éléments Flexbox est défini sur«40px".
• Le "Couleur de l'arrière plan«Des éléments Flexbox sont définis comme«poudre bleue".
• Le "alignement de texte«Le centre a été défini comme«centre«Pour aligner les alphabets écrits à l'intérieur des éléments Flexbox au centre.
• Le "rembourrage«La propriété a été définie comme«25px«Pour définir la distance entre le contenu et la frontière.

L'extrait de code ci-dessus générera la sortie suivante:

Maintenant, il est nécessaire de définir la distance entre les éléments Flexbox créés.

Méthode 1: Définissez la propriété «justifier» comme «spatial»

L'une des méthodes est d'ajouter le «justifier"Et le définissez comme"spatial«Pour ajouter les espaces ou la distance autour de chaque élément Flexbox:

.fléchir

Justify-Content: Space-Asound;
…

.article

…

L'exemple de code ci-dessus indique qu'il y a l'ajout du «justifier«Propriété qui a été définie comme«spatial". Les points indiquent que toutes les propriétés restent les mêmes ici que celles ajoutées ci-dessus dans la section préalable de cet article.

En conséquence, l'espace défini sera ajouté autour des éléments Flexbox:

Méthode 2: Définissez la propriété «justifier» comme «l'espace-intermédiaire»

L'autre méthode consiste à ajouter le «justifier"Et le définissez comme"l'espace entre«Pour ajouter les espaces ou la distance entre chaque élément Flexbox:

.fléchir

justifier-contenu: espace-intermédiaire;
…

.article

…

L'exemple ci-dessus indique qu'il y a l'ajout du «justifier-contenu: l'espace entre»Et toutes les propriétés CSS restent les mêmes ici aussi.

L'exemple ci-dessus ajoutera la distance entre chaque élément Flexbox. Cependant, il n'y aura pas de distance entre l'élément le plus à gauche et le plus à droite et le conteneur DIV car il n'ajoute que la distance entre les éléments Flexbox contrairement au «spatial»:

Cela résume les deux méthodes différentes pour définir la distance entre les éléments Flexbox.

Conclusion

Pour définir la distance entre les éléments Flexbox, ajoutez l'ID ou le sélecteur de classe dans l'élément de style CSS faisant référence à l'élément parent dans lequel tous les éléments de Flexbox ont été créés, puis définissent le "justifier-contenu: l'espace entre«Propriété comme soit»spatial" ou "l'espace entre". Ce guide de blog sur les méthodes de définition de la distance entre les éléments Flexbox.