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
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	Nummer
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

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	Edge Mobile	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 21 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 6.1 Mit Präfix 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 Ja 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-	Edge Mobile Vollständige Unterstützung Ja Vollständige Unterstützung Ja Vollständige Unterstützung Ja 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 ?	Samsung Internet Android ?
<0 animate Nicht standardisiert	Chrome Vollständige Unterstützung 49	Edge ?	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 ?	Opera Keine Unterstützung Nein	Safari Keine Unterstützung Nein	WebView Android ?	Chrome Android ?	Edge Mobile ?	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 Keine Unterstützung Nein	Safari iOS Keine Unterstützung Nein	Samsung Internet Android ?

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Keine Unterstützung: Keine Unterstützung
Kompatibilität unbekannt: Kompatibilität unbekannt
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