Comment puis-je obtenir un espacement égal entre les éléments Flexbox, y compris le premier et le dernier ?

Garantir un espacement égal dans les éléments Flexbox

Lorsque vous utilisez flexbox pour aligner des éléments, il est courant de rencontrer des situations dans lesquelles vous souhaitez un espacement égal entre tous les éléments, y compris le premier et le dernier. .

Le problème "Space-Around"

La propriété CSS justification-content : space-around apparaît pour répartir les objets uniformément avec un espace égal autour d'eux. Cependant, comme indiqué dans un article, le premier élément a une unité d'espace contre le bord du conteneur, ce qui entraîne un espacement inégal entre les éléments.

Résoudre le problème des pseudo-éléments

Une approche pour pour obtenir un espacement égal, il faut utiliser des pseudo-éléments. En ajoutant les pseudo-éléments ::before et ::after au conteneur flex, nous pouvons insérer des marqueurs de largeur nulle qui comptent comme des éléments flex.

En appliquant justifier-content: space-between et en spécifiant une largeur nulle pour les pseudo-éléments, les éléments flexibles visibles apparaîtront régulièrement espacés.

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before {
  content: "";
  width: 0;
}

flex-container::after {
  content: "";
  width: 0;
}

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!