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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
flex-grow | Chrome
Vollständige Unterstützung
29
| Edge
Vollständige Unterstützung
12
| Firefox
Vollständige Unterstützung
20
| IE
Vollständige Unterstützung
11
| Opera
Vollständige Unterstützung
12.1
| Safari
Vollständige Unterstützung
9
| WebView Android
Vollständige Unterstützung
4.4
| Chrome Android
Vollständige Unterstützung
29
| Firefox Android
Vollständige Unterstützung
20
| Opera Android
Vollständige Unterstützung
12.1
| Safari iOS
Vollständige Unterstützung
9
| Samsung Internet Android ? |
| <0 animate | Chrome Vollständige Unterstützung 49 | Edge Keine Unterstützung Nein | Firefox
Vollständige Unterstützung
32
| 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
| Opera Android Vollständige Unterstützung 36 | 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.