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

Agrandissement des éléments flexibles proportionnellement à leur taille d'origine

Pour garantir que les éléments flexibles se dilatent uniformément tout en conservant leurs largeurs relatives, ajustez à partir de la flexion : 1 fléchir : auto. Ce commutateur modifie le calcul du dimensionnement, en tenant compte de la taille du contenu.

Comprendre Flex-grow et Flex-basis

Flex-grow, comme son nom l'indique, augmente la taille d'un élément en fonction de sa valeur définie et de l'espace libre disponible. Cependant, il est important de considérer le rôle de flex-basis, qui détermine la taille initiale d'un article.

Dimensionnement relatif ou absolu

Lorsque flex-basis est défini sur 0, flex-grow traite tout l'espace comme espace libre pour la distribution, ce qui entraîne un dimensionnement absolu où les éléments sont de même largeur, quel que soit le content.

À l'inverse, si flex-basis est auto (valeur par défaut), la taille du contenu est prise en compte avant de calculer l'espace libre. Cela permet un dimensionnement relatif, où seul l'espace supplémentaire est distribué proportionnellement.

Répartition des valeurs Flex

• flex : 1 : raccourci pour flex-grow : 1 ( dimensionnement absolu)
• flex-grow : 1 : Dimensionnement relatif, prenant en compte les deux contenus taille et espace disponible
• flex : auto : Équivalent à flex-grow : 1 / flex-shrink : 1 / flex-basis : auto, qui est aussi un dimensionnement relatif

En employant flex : auto, les boutons augmenteront en taille pour remplir la largeur restante de la rangée tout en préservant leur rapport de taille d'origine. Cela garantira que le bouton le plus large reste plus large que les autres, même lorsqu'il est développé.

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!