Comment puis-je agrandir les éléments flexibles proportionnellement à leurs tailles d'origine ?

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

En HTML et CSS, il est courant d'utiliser Flexbox pour sa facilité de création de mises en page flexibles et dynamiques. Cependant, dans certains scénarios, vous souhaiterez peut-être que les éléments flexibles s'agrandissent proportionnellement à leur taille d'origine, en conservant leurs largeurs relatives même lorsque la largeur totale du conteneur change.

Dans une configuration Flexbox typique, vous pouvez utiliser flex : 1 pour que tous les éléments s'agrandissent de manière égale, quelle que soit leur taille initiale. Cependant, cette approche donne à tous les éléments la même largeur. Pour surmonter cela, vous pouvez utiliser la propriété flex-basis.

Flex-Basis et Flex-grow

flex-basis définit la largeur initiale d'un élément flexible. Il prend la valeur auto par défaut, ce qui signifie qu'il s'ajuste à la taille du contenu de l'élément. Lorsqu'il est combiné avec flex-grow, vous pouvez contrôler la façon dont l'espace excédentaire dans le conteneur est réparti entre les éléments flex.

Avec flex-basis : auto, flex-grow distribue uniquement l'espace excédent, à l'exclusion l'espace occupé par le contenu de l'élément. Cela garantit que les éléments s'agrandissent proportionnellement à leur taille d'origine.

Exemple : Ajuster la largeur des boutons

Considérons une rangée de boutons de largeurs variables. En utilisant le CSS suivant, tous les boutons se développeront pour remplir l'espace disponible, en conservant leurs tailles relatives :

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

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

Vous pouvez également utiliser la notation abrégée suivante :

.button {
  flex: 1 1 auto;
}

Conclusion

En comprenant l'interaction entre flex-basis et flex-grow, vous pouvez vous assurer que les éléments flexibles s'étendent proportionnellement à leur taille d'origine tout en respectant leur largeurs individuelles. Cette approche offre une plus grande flexibilité dans les mises en page dynamiques et la conception réactive.

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!