Pourquoi Flex et Flex-Grow ne fonctionnent-ils pas sur mes éléments de saisie et de bouton ?

Flex et Flex-Grow ne prennent pas d'effet sur les éléments d'entrée et de bouton

Dans Flexbox, les éléments d'un conteneur peuvent être dimensionnés et positionnés à l'aide les propriétés flex et flex-grow. Cependant, ces propriétés peuvent ne pas sembler fonctionner comme prévu lorsqu'elles sont appliquées aux éléments d'entrée et de bouton.

Raison :

Contrairement aux DIV, les éléments d'entrée et de bouton ont une largeur et une largeur par défaut paramètres de hauteur qui remplacent les propriétés Flexbox.

Illustration :

[Image affichant la largeur par défaut attribuée par le navigateur aux éléments d'entrée]

Comme le montre l'image, le navigateur définit automatiquement une largeur pour l'élément d'entrée, même sans aucun style CSS appliqué.

Solution :

Pour permettre à Flexbox de contrôler le dimensionnement des éléments de saisie et des boutons, il faut supprimer la largeur et la hauteur par défaut settings :

input, button {
  width: auto;
  height: auto;
}

Une fois ces paramètres par défaut supprimés, les propriétés flex et flex-grow devraient prendre effet comme prévu.

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!