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

Espacement égal entre les éléments flexibles

Problème

Atteindre un espacement égal autour des enfants flexbox pose un défi, comme souligné dans un article précédent où justifier-contenu : l'espace autour est présenté comme une solution imparfaite. Cet article explore des méthodes plus complètes pour garantir un espacement égal, y compris le premier et le dernier élément.

Solution

Pseudo-éléments

Avances récentes du navigateur permettre aux pseudo-éléments (::before et ::after) d'être traités comme des éléments flex dans un conteneur flex. Cela ouvre de nouvelles possibilités pour créer un espacement égal.

En ajoutant des pseudo-éléments ::before et ::after au conteneur et en utilisant justifier-content: space-between, ainsi que des pseudo-éléments de largeur nulle, nous pouvons créer l'illusion d'un espacement égal entre les éléments flexibles visibles.

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

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

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

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!