Warum funktionieren Flex und Flex-Grow bei meinen Eingabe- und Schaltflächenelementen nicht?

Flex und Flex-Grow wirken sich nicht auf Eingabe- und Schaltflächenelemente aus

In Flexbox können Elemente innerhalb eines Containers mit in der Größe angepasst und positioniert werden die Flex- und Flex-Grow-Eigenschaften. Diese Eigenschaften scheinen jedoch möglicherweise nicht wie erwartet zu funktionieren, wenn sie auf Eingabe- und Schaltflächenelemente angewendet werden.

Grund:

Im Gegensatz zu DIVs haben Eingabe- und Schaltflächenelemente die Standardbreite und Höheneinstellungen, die die Flexbox-Eigenschaften überschreiben.

Abbildung:

[Bild zeigt die Vom Browser zugewiesene Standardbreite für Eingabeelemente]

Wie im Bild zu sehen ist, legt der Browser automatisch eine Breite für das Eingabeelement fest, auch ohne angewendetes CSS-Styling.

Lösung:

Damit Flexbox die Größe von Eingabe- und Schaltflächenelementen steuern kann, muss die Standardbreite und -höhe entfernt werden Einstellungen:

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

Sobald diese Standardeinstellungen entfernt werden, sollten die Flex- und Flex-Grow-Eigenschaften wie erwartet wirksam werden.

Das obige ist der detaillierte Inhalt vonWarum funktionieren Flex und Flex-Grow bei meinen Eingabe- und Schaltflächenelementen nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!