Pourquoi les propriétés Flex ne fonctionnent-elles pas sur mes éléments de saisie et de bouton ?

Les propriétés Flex n'affectent pas les éléments d'entrée/bouton dans le conteneur Flex

Dans les mises en page Flexbox, il est courant que les éléments ne répondent pas comme prévu au propriétés de flexion ou de croissance flexible. Ce problème affecte spécifiquement les éléments d'entrée et les boutons.

Comprendre le comportement par défaut des éléments d'entrée

Contrairement aux éléments div, les éléments d'entrée ont une largeur par défaut définie par le navigateur. Cela peut interférer avec le dimensionnement basé sur flex.

Lors de l'application de flex ou flex-grow à un élément d'entrée, le navigateur tente de redimensionner l'élément, mais la largeur par défaut annule cet effort. Par conséquent, ces propriétés semblent n'avoir aucun effet.

Résoudre le problème

Pour résoudre ce problème, supprimez la largeur par défaut des éléments d'entrée à l'aide de CSS :

input {
  width: inherit;
}

Vous pouvez également utiliser une réinitialisation CSS pour supprimer tous les styles de navigateur par défaut, y compris la largeur par défaut des éléments d'entrée.

Une fois la largeur par défaut est supprimée, les propriétés flex et flex-grow fonctionneront comme prévu sur les éléments d'entrée et de bouton dans un conteneur Flexbox.

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!