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

Agrandissement des éléments Flex-Grow en fonction de leur taille d'origine

Lorsque vous stylisez des éléments avec Flexbox, il est souhaitable de répartir l'espace restant dans le conteneur entre les éléments. Cependant, par défaut, flex-grow attribue une largeur égale à tous les éléments, quelle que soit leur taille initiale. Pour conserver cette disparité, pensez à définir flex-grow sur « auto » au lieu de « 1 ».

Explication

Flex-grow fonctionne en fonction de deux paramètres : l'espace libre disponible et la base flexible. L'espace libre fait référence à l'espace restant dans le conteneur qui peut être réparti entre les éléments flexibles. Flex-basis détermine la taille initiale de chaque article avant distribution.

Dimensionnement absolu (flex : 1) :

• Lorsque flex-basis est défini sur 0 , flex-grow traite la totalité de l'espace disponible comme de l'espace libre.
• Il en résulte une taille proportionnellement égale pour tous les éléments, quel que soit leur contenu original.

Dimensionnement relatif (flex : auto) :

• Lorsque flex-basis est auto (valeur par défaut), flex-grow prend en tenant compte de la taille du contenu de chaque élément.
• Seul l'espace restant dans le conteneur est ensuite réparti proportionnellement en fonction du flex-grow valeur.

Exemple :

Considérons trois boutons de largeurs variables. Nous voulons qu'ils remplissent la largeur restante du conteneur, chacun conservant sa taille proportionnelle.

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

En réglant flex-grow sur auto, les boutons s'agrandiront proportionnellement à partir de leur taille actuelle, remplissant l'espace disponible tout en préservant leurs différences de taille initiales.

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!