Comment aligner les éléments flexibles vers la gauche lors du wrap : résoudre le problème de centrage avec « justifier-content : space-between » ?

Alignement des éléments flexibles sur l'emballage : du centre vers la gauche

Lors de la conception d'une mise en page réactive à l'aide de flexbox, il est souvent souhaité d'aligner les éléments flexibles uniformément répartis horizontalement. Cependant, lorsque le contenu passe à une nouvelle ligne, la ligne suivante peut commencer à se remplir à partir du centre plutôt que de la gauche. Ce problème peut être résolu en utilisant les propriétés flexbox appropriées.

Solution

La solution pour empêcher les éléments flexibles de s'aligner de manière centrale sur l'enveloppement consiste à remplacer la règle justifier-contenu : espace-autour par justifier -content : space-between.

Explication

Selon la spécification flexbox, justification-content: space-around distribue uniformément les éléments flexibles le long de l'axe principal avec des espaces demi-taille à chaque extrémité. Cependant, s'il n'y a pas suffisamment d'espace ou s'il n'y a qu'un seul élément, il se comporte comme un centre.

En revanche, justification-content : space-between distribue les éléments flexibles uniformément avec des espaces égaux entre eux. Lorsqu'il n'y a pas suffisamment d'espace ou qu'il n'y a qu'un seul élément, cela agit comme flex-start, qui démarre les éléments flexibles à partir de la gauche.

En utilisant l'espace entre les deux, vous forcez les éléments flexibles à s'aligner à partir de la gauche, peu importe du nombre d'articles sur la ligne.

Raffinements

L'utilisation de l'espace entre les deux peut laisser des espaces sur le côté droit du conteneur. Si vous préférez l'effet d'espace autour, vous pouvez ajouter un remplissage sur les côtés gauche et droit du conteneur pour le simuler.

Cependant, l'alignement des éléments lorsque deux sont enroulés sur une nouvelle ligne pose un défi distinct qui nécessite davantage enquête.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!