Style flex Eigenschaft

Definition und Verwendung

flex Eigenschaft, die die Länge des Elements im Vergleich zu anderen flexiblen Elementen im selben Container setzt oder zurückgibt.

flex Diese Eigenschaft ist eine Kurzform der Eigenschaften flexGrow, flexShrink und flexBasis.

Anmerkung:Wenn das Element kein flexibles Element ist, dann flex Eigenschaft ungültig.

Weitere Informationen:

CSS Referenzhandbuch:flex-Eigenschaft

HTML DOM STYLE Referenzhandbuch:flexBasis-Eigenschaft

HTML DOM STYLE Referenzhandbuch:flexDirection-Eigenschaft

HTML DOM STYLE Referenzhandbuch:flexFlow-Eigenschaft

HTML DOM STYLE Referenzhandbuch:flexGrow-Eigenschaft

HTML DOM STYLE Referenzhandbuch:flexShrink-Eigenschaft

HTML DOM STYLE Referenzhandbuch:flexWrap-Eigenschaft

Beispiel

Stellen Sie die Länge aller flexiblen Elemente gleich, unabhängig von ihrem Inhalt:

for (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

Versuchen Sie es selbst

Syntax

Rückgabe der Flex-Eigenschaft:

object.style.flex

Flex-Eigenschaft setzen:

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

Eigenschaftswert

Wert Beschreibung
flex-grow Zahl, die die Zunahme des Elements im Vergleich zu anderen flexiblen Elementen bestimmt.
flex-shrink Zahl, die die Reduzierung des Elements im Vergleich zu anderen flexiblen Elementen bestimmt.
flex-basis

Länge des Elements.

Gültige Werte: "auto", "inherit", oder Werte in Einheiten wie "%", "px", "em", oder anderen Längenheiten.
auto Entspricht 1 1 auto.
initial Entspricht 0 1 auto. Siehe initial.
none Entspricht 0 0 auto.
inherit Diese Eigenschaft wird von ihrem übergeordneten Element geerbt. Siehe inherit.

Technische Details

Standardwert: 0 1 auto
Rückgabewert: Zeichenkette, die den flex-Eigenschaft.
CSS-Version: CSS3

Browser-Unterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung 11.0 Unterstützung 9.0 Unterstützung