Comment aligner les éléments flexibles vers la gauche lors de l'emballage ?

Comment aligner à gauche des éléments flexibles lors de l'emballage

Problème :

Un menu mobile affiche les icônes des réseaux sociaux en rangées de trois, disposées horizontalement avec un espacement égal. Cependant, lorsque plus de trois éléments sont présents, les lignes suivantes commencent à se remplir à partir du centre. L'objectif est d'aligner à gauche les éléments de la liste dans chaque ligne sans perturber l'espacement égal.

Solution :

Remplacer la propriété justification-contenu : espace-autour par justifier-content : espace-entre.

Explication :

Dans CSS Flexbox, la propriété justifier-content aligne les éléments horizontalement le long de l'axe principal. space-around distribue les éléments uniformément avec des espaces demi-taille aux deux extrémités. Cependant, lorsqu'il y a un espace limité ou qu'un seul élément sur la ligne, il agit comme un centre, ce qui entraîne le centrage des éléments.

En revanche, l'espace entre distribue uniformément les éléments sans espaces demi-taille aux extrémités. . Lorsqu'il y a un espace limité ou un seul élément, il se comporte comme flex-start, qui aligne les éléments à gauche.

En utilisant justifier-contenu : l'espace entre les deux, les icônes des réseaux sociaux s'aligneront à gauche dans chaque élément. rangée, en veillant à ce que la rangée suivante se remplisse à partir de la gauche.

Remarques supplémentaires :

Lors de l'utilisation de l'espace entre les deux, un remplissage gauche et droit peut être ajouté au conteneur pour simuler le comportement de l'espace autour. Cependant, cela peut nécessiter des ajustements supplémentaires pour tenir compte de l'alignement de plusieurs éléments sur chaque ligne.

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!