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.

Initialwert0
Anwendbar aufflexible Elemente einschließlich In-Flow-Pseudo-Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimationstypNummer
Kanonische Reihenfolgedie 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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
flex-growChrome 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 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 ?
<0 animate
Nicht standardisiert
Chrome Vollständige Unterstützung 49Edge Keine Unterstützung NeinFirefox 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 NeinOpera Vollständige Unterstützung 36Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 49Chrome Android Vollständige Unterstützung 49Firefox 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 36Safari iOS Keine Unterstützung NeinSamsung 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

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, vssn, SJW, Sebastianz, fscholz
Zuletzt aktualisiert von: mdnwebdocs-bot,