Comment puis-je agrandir les éléments Flexbox proportionnellement en fonction de leur taille initiale ?

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

Comprendre le problème

Dans votre situation, vous avez plusieurs boutons disposés dans une rangée à l’aide de flexbox. Vous souhaitez que ces boutons augmentent leur largeur proportionnellement pour remplir l'espace de ligne restant tout en conservant leurs différences de largeur d'origine. Cependant, en définissant flex : 1 sur chaque bouton, tous les boutons deviennent égaux en largeur.

Solution : passer à Flex : Auto

La clé pour atteindre l'objectif souhaité Le résultat réside dans le choix de la valeur correcte pour flex-grow. Au lieu de flex: 1, vous devez utiliser flex: auto.

Comment fonctionne Flex-Grow

flex-grow distribue l'espace libre dans le conteneur entre les éléments flexibles en fonction de deux facteurs :

• Espace libre : L'espace inutilisé dans le ligne/colonne.
• Flex-basis : La taille initiale de l'élément flexible avant de prendre en compte flex-grow.

Explication

Lorsque vous utilisez flex: 1, vous définissez flex-basis sur 0 et flex-grow sur 1. Cela signifie que flexbox traite tout l'espace de la ligne comme de l'espace libre, ce qui entraîne une répartition égale entre tous les éléments quel que soit leur contenu.

D'un autre côté, flex: auto définit flex-basis sur auto, qui prend en compte la taille de l'élément contenu avant de distribuer l’espace libre. Cela garantit que les éléments conservent leurs différences de taille d'origine tout en remplissant l'espace de ligne restant.

Exemple

Dans votre code, remplacez flex : 1 par flex : auto pour chaque bouton :

.button {
  flex: auto;  // Change from flex: 1
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

Cela permettra aux boutons de s'étendre en fonction de leur largeur d'origine, répondant ainsi à vos besoins.

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!