Comment puis-je faire en sorte que Flex-Grow respecte la taille d'origine de l'article dans une mise en page Flex ?

Faites en sorte que Flex-Grow développe les éléments en fonction de leur taille d'origine

Dans les mises en page flexibles, la propriété flex-grow peut être utilisée pour répartir proportionnellement l'espace disponible entre les éléments. Cependant, par défaut, flex-grow ignore la taille d'origine de ces éléments.

Problème : tailles d'éléments égalisées

Lors de l'utilisation de flex avec flex-grow défini sur 1, tous les éléments d'une rangée s'étirent pour remplir l'espace disponible, ce qui donne un résultat égal largeurs :

.container {
  display: flex;
}

.item {
  flex: 1;
}

<div class="container">
  <div class="item">Single</div>
  <div class="item">Larger title</div>
  <div class="item">Another really large title</div>
</div>

Solution : Dimensionnement relatif avec flex-auto

Pour développer les éléments en fonction de leur taille d'origine, nous pouvons utiliser flex-basis: auto. Cela indique au navigateur de prendre en compte la taille du contenu lors du calcul de l'espace disponible.

.container {
  display: flex;
}

.item {
  flex: auto;
}

Avec flex: auto, les éléments rempliront désormais l'espace disponible proportionnellement à leurs largeurs d'origine :

Explication

flex-grow dicte toujours la façon dont l'espace libre est distribué, mais la valeur flex-basis est prise en compte en premier. Si flex-basis est auto, le navigateur détermine la taille intrinsèque de chaque élément et la déduit de l'espace disponible. L'espace restant est ensuite distribué en fonction des valeurs flex-grow.

Dans notre exemple, tous les éléments ont la même valeur flex-grow (1), donc l'espace disponible est réparti de manière égale. Cependant, étant donné que l'élément portant le titre le plus grand a une taille intrinsèque plus large, il reçoit une plus grande partie de l'espace restant.

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!