Comment supprimer les espaces entre les colonnes dans une mise en page Flexbox lors du conditionnement ?

Supprimer l'espace (espaces) entre plusieurs lignes d'éléments flexibles lorsqu'ils sont enroulés

Le problème : les espaces entre les colonnes

Lors de l'utilisation de flexbox pour créer un conteneur avec plusieurs colonnes d'éléments, il est possible de rencontrer un problème où il y a des espaces entre les colonnes. Cela se produit parce que le paramètre initial d'un conteneur flexible est align-content: stretch, qui distribue plusieurs lignes d'éléments flexibles uniformément le long de l'axe transversal.

Pour éliminer ces espaces, ajustez la propriété align-content sur flex- start.

Comprendre align-content

Lorsque vous travaillez avec des conteneurs flexibles sur une seule ligne (c'est-à-dire flex-wrap : nowrap), les propriétés à utiliser pour répartir l'espace le long de l'axe transversal sont align-items et align-self. Cependant, dans les conteneurs flexibles multilignes (c'est-à-dire flex-wrap: wrap), comme celui de la question, la propriété align-content doit être utilisée pour distribuer les lignes flexibles (lignes/colonnes) le long de l'axe transversal.

Définition d'align-content : flex-start

En appliquant align-content: flex-start au conteneur flex, les lignes flexibles s'aligneront sur le début de la croix axe, éliminant les espaces indésirables entre les colonnes.

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!