flex-grow

Die flex-grow CSS Eigenschaft gibt den Wachstumsfaktor eines flexiblen Elements in dem zur Verfügung stehenden Raum eines Flex Containers an. Wenn alle Schwesternelemente den gleichen flex-grow Wert haben, teilen sich diese Elemente den gleichen Platzanteil im Container auf. Andernfalls entscheidet der Platzanteil durch das Verhältnis, das sich aus den verschiedenen flex-grow Werten ergibt.

Verwendet wird flex-grow zusammen mit den anderen flex Eigenschaften flex-shrink und flex-basis. Im Regelfall wird durch die flex Kurzschrift sichergestellt, dass alle Werte gesetzt werden.

Initialwert	`0`
Anwendbar auf	flexible Elemente einschließlich In-Flow-Pseudo-Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Nummer

Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

Syntax

<number>

flex-grow: 3

flex-grow: inherit

Werte

<number>: Siehe <number>. Negative Werte sind ungültig.

Beispiele

element { 
  flex-grow: 3;
}

Spezifikationen

Spezifikation	Status	Kommentar
CSS Flexible Box Layout Module	Anwärter Empfehlung	Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`flex-grow`	Chrome Vollständige Unterstützung 29 Vollständige Unterstützung 29 Vollständige Unterstützung 22 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Edge Vollständige Unterstützung 12 Vollständige Unterstützung 12 Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Vollständige Unterstützung 20 Hinweise Vollständige Unterstützung 20 Hinweise Hinweise Since Firefox 28, multi-line flexbox is supported. Keine Unterstützung 18 — 20 Deaktiviert Deaktiviert From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE Vollständige Unterstützung 11 Vollständige Unterstützung 11 Vollständige Unterstützung 10 Alternativer Name Alternativer Name Verwendet den nicht standardisierten Namen: `-ms-flex-positive`	Opera Vollständige Unterstützung 12.1 Vollständige Unterstützung 12.1 Vollständige Unterstützung 15 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Safari Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 6.1 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung 4.4 Vollständige Unterstützung 4.4 Vollständige Unterstützung ≤37 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Chrome Android Vollständige Unterstützung 29 Vollständige Unterstützung 29 Vollständige Unterstützung 25 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Android Vollständige Unterstützung 20 Hinweise Vollständige Unterstützung 20 Hinweise Hinweise Since Firefox 28, multi-line flexbox is supported. Keine Unterstützung 18 — 20 Deaktiviert Deaktiviert From version 18 until version 20 (exclusive): this feature is behind the `layout.css.flexbox.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Vollständige Unterstützung 12.1 Vollständige Unterstützung 12.1 Vollständige Unterstützung 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Safari iOS Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 7 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 2.0 Vollständige Unterstützung 2.0 Vollständige Unterstützung 1.5 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-
<0 animate Nicht standardisiert	Chrome Vollständige Unterstützung 49	Edge Vollständige Unterstützung 79	Firefox Vollständige Unterstützung 32 Hinweise Vollständige Unterstützung 32 Hinweise Hinweise Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 36	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 49	Chrome Android Vollständige Unterstützung 49	Firefox Android Vollständige Unterstützung 32 Hinweise Vollständige Unterstützung 32 Hinweise Hinweise Before Firefox 32, Firefox wasn't able to animate values starting or stopping at `0`.	Opera Android Vollständige Unterstützung 36	Safari iOS Keine Unterstützung Nein	Samsung Internet Android Vollständige Unterstützung 5.0

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.: Nicht standardisiert. Erwarte schlechte browserübergreifende Unterstützung.
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.: Benutzer muss dieses Feature explizit aktivieren.
Verwendet einen nicht standardisierten Namen.: Verwendet einen nicht standardisierten Namen.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

Siehe auch

Verwendung von CSS Flexible Boxes