Comment supprimer les espaces entre les éléments flexibles lors de leur emballage ?

Supprimez l'espace entre les éléments flexibles lorsqu'ils sont emballés

Vous essayez d'obtenir une disposition flexible sur plusieurs lignes dans laquelle les éléments s'écoulent horizontalement lorsqu'il n'y a pas assez d'espace verticalement . Cependant, vous rencontrez des espaces entre les colonnes.

Le paramètre initial pour les conteneurs flexibles est align-content: stretch. Cela répartit uniformément les éléments flexibles sur l’axe transversal d’un conteneur multiligne. Pour éviter ce comportement, appliquez align-content: flex-start au conteneur.

Lorsque vous travaillez avec des conteneurs flexibles sur une seule ligne, vous utilisez align-items et align-self pour répartir l'espace le long de l'axe transversal. Cependant, dans les conteneurs multilignes, comme dans votre cas, vous utilisez la propriété align-content pour répartir les lignes flexibles (lignes ou colonnes) le long de l'axe transversal.

La propriété align-content accepte différentes valeurs, comprenant :

• flex-start
• flex-end
• centre
• espace-entre
• espace-autour
• stretch

Par défaut, la valeur est stretch, ce qui signifie l'espace libre restant est réparti également entre toutes les lignes, ce qui les fait s'étendre.

Solution

Pour éliminer les espaces entre les colonnes dans votre exemple de code, modifiez le CSS :

.container {
  align-content: flex-start;
}

Conclusion

Utilisation d'align-content : flex-start garantit que les lignes flexibles partent du haut du conteneur et continuent vers le bas sans aucun espace supplémentaire. Cela correspond à la mise en page prévue que vous recherchiez.

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!