Comment obtenir un espacement égal entre les éléments flexibles ?

Espacement égal entre les éléments Flex

Vous cherchez une méthode pour répartir un espace égal entre les éléments Flexbox, même les éléments initiaux et finaux ? Cet article explore des solutions pour obtenir cette distribution souhaitée.

Une approche consiste à exploiter des pseudo-éléments en conjonction avec la propriété justification-contenu : espace-entre. Cette technique exploite le fait que les navigateurs traitent les pseudo-éléments comme des éléments flexibles au sein d'un conteneur flexible. En ajoutant les éléments ::before et ::after au conteneur, vous créez essentiellement des espaces réservés invisibles qui participent à la distribution de l'espace.

L'extrait ci-dessous démontre la mise en œuvre de cette méthode :

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

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

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

Cela permet d'obtenir des éléments flexibles uniformément espacés, avec un rembourrage égal des deux côtés de chaque élément, y compris les plus extérieurs. Bien que cette approche offre une solution bien prise en charge, elle peut ne pas correspondre à tous les cas d'utilisation.

Pour une alternative plus polyvalente, considérez la valeur space-around pour justifier-contenu. Bien que cela entraîne un espacement visuellement inégal entre les éléments (en raison du fait que chaque élément a un espace égal des deux côtés), cela garantit que tous les éléments maintiennent une distance constante par rapport aux bords du conteneur.

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

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!