Comment supprimer les espaces entre les colonnes Flexbox après le conditionnement ?

Supprimer l'espace entre les colonnes d'éléments flexibles après l'emballage

Lorsque vous utilisez flexbox pour créer des colonnes d'éléments dans un conteneur avec une hauteur définie, vous pouvez rencontrez des espaces indésirables entre les colonnes lorsqu'elles passent sur une nouvelle ligne. Ce problème se produit en raison du paramètre par défaut d'align-content : stretch.

Align-content détermine la distribution de plusieurs lignes d'éléments flexibles le long de l'axe transversal. Lorsqu'elles sont configurées pour s'étirer, les lignes flexibles se répartissent uniformément dans l'espace disponible. Pour remplacer ce comportement et supprimer les espaces, vous pouvez appliquer align-content: flex-start au conteneur.

Contrairement aux conteneurs flexibles à une seule ligne, les conteneurs flexibles à plusieurs lignes (flex-wrap: wrap) utilisez la propriété align-content pour distribuer des lignes flexibles. Selon la spécification flexbox, align-content a les six valeurs suivantes :

• flex-start
• flex-end
• center
• space -entre
• espace-autour
• étirement (par défaut)

Stretch permet aux lignes flexibles de s'étendre et de remplir tout espace restant. S'il y a un espace libre négatif, stretch se comporte comme flex-start, tandis que dans tous les autres cas, il divise l'espace de manière égale entre les lignes.

En définissant align-content: flex-start, vous alignez les lignes flex au début de l'axe transversal, supprimant ainsi tout espace entre les colonnes. Cela vous donne le résultat souhaité : des éléments soigneusement alignés les uns sous les autres, remplissant l'espace disponible.

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!