flex-grow
Try it
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
(en-US). Im Regelfall wird durch die flex
(en-US) 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
flex-grow =
<number [0,∞]>
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.