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 (en-US). Im Regelfall wird durch die flex (en-US) Kurzschrift sichergestellt, dass alle Werte gesetzt werden.

Initialwert0
Anwendbar aufflexible Elemente einschließlich In-Flow-Pseudo-Elemente
VererbtNein
Berechneter Wertwie angegeben
AnimationstypNummer

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

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.

Siehe auch