CSS flex-grow Eigenschaft

Definition und Verwendung

Die Eigenschaft flex-grow legt den prozentualen Zuwachs dieses Elements gegenüber den anderen flexiblen Elementen im selben Behälter fest.

Anmerkung:Wenn das Element kein flexibles Element ist, ist die flex-Eigenschaft ungültig.

Weitere Informationen:

CSS-Tutorial: CSS-Flexbox

CSS Referenzhandbuch:flex-Eigenschaft

CSS Referenzhandbuch:flex-basis-Eigenschaft

CSS Referenzhandbuch:flex-direction-Eigenschaft

CSS Referenzhandbuch:flex-flow-Eigenschaft

CSS Referenzhandbuch:flex-shrink-Eigenschaft

CSS Referenzhandbuch:flex-wrap-Eigenschaft

HTML DOM Referenzhandbuch:flexGrow-Eigenschaft

Beispiel

Machen Sie die Breite des zweiten flexiblen Elements dreimal so groß wie die der anderen flexiblen Elemente:

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

Versuchen Sie es selbst

CSS-Syntax

flex-grow: number|initial|inherit;

Eigenschaftswert

Wert Beschreibung
number Zahlwert, der den prozentualen Zuwachs dieses Elements gegenüber den anderen flexiblen Elementen im selben Behälter festlegt. Standardwert ist 0.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe initial.
inherit Diese Eigenschaft von ihrem übergeordneten Element erben. Siehe inherit.

Technische Details

Standardwert: 0
Vererbung: Nein
Animationserstellung: Unterstützt. Siehe:Animationsspezifische Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.flexGrow="5"

Browserunterstützung

Die in der Tabelle genannten Zahlen kennzeichnen die erste Browserversion, die die Eigenschaft vollständig unterstützt.

Die Zahlen in der Tabelle kennzeichnen die erste Browserversion, die die Eigenschaft vollständig unterstützt. Verwenden Sie die Präfixversionen vor -webkit-, -ms- oder -moz-, um die numerischen Vorschriften zu befolgen.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0