Comment puis-je faire en sorte que les éléments Flexbox occupent des largeurs égales ?

Distribution uniforme des éléments Flexbox

Flexbox a gagné en popularité en tant que méthode de mise en page polyvalente, mais elle a tendance à répartir l'espace autour des éléments de manière uniforme plutôt que le articles eux-mêmes. Pour relever ce défi, explorons une solution permettant de garantir que tous les éléments flexbox occupent la même largeur.

Flexbox fonctionne sur le principe de la croissance et de la réduction des éléments en fonction de leur propriété flex-grow. Par défaut, flex-grow est défini sur 0, ce qui entraîne le rendu des éléments avec leur largeur naturelle. Cependant, nous pouvons modifier cette propriété pour obtenir le résultat souhaité.

Pour créer des éléments de largeurs égales, définissez leur base flexible sur 0. Cela établit un point de départ commun pour tous les éléments. De plus, autorisez la croissance des éléments en définissant flex-grow sur 1. Cela garantira qu'ils se développeront de manière égale pour remplir l'espace disponible.

Le code CSS suivant illustre cette approche :

.header {
  display: flex;
}

.item {
  flex: 1 1 0px;
  text-align: center;
  border: 1px solid black;
}

En définissant flex-basis sur 0 et flex-grow sur 1, tous les éléments de la classe .item auront une quantité d'espace égale, quel que soit leur contenu. Cela élimine la répartition inégale observée dans l'exemple d'origine.

Remarque : certains IDE et linters peuvent suggérer d'omettre l'unité « px » de flex. Cependant, le conserver garantit un rendu correct dans Internet Explorer.

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!