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.
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
BCD tables only load in the browser
[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.