Die flex-growEigenschaft ist eine Untereigenschaft des Moduls Flexible Box Layout.
Es definiert die Fähigkeit eines flexiblen Elements, bei Bedarf zu wachsen. Es akzeptiert einen Wert ohne Einheit, der als Anteil dient. Es gibt vor, wie viel Platz im Flex-Container der Artikel einnehmen soll.
Wenn beispielsweise alle Elemente flex-growauf 1 festgelegt wurden, wird jedes untergeordnete Element im Container auf die gleiche Größe festgelegt. Wenn Sie einem der Kinder den Wert 2 geben würden, würde dieses Kind doppelt so viel Platz beanspruchen wie die anderen.
Syntax
flex-grow: .flex-item ( flex-grow: 2; )Demo
Die folgende Demo zeigt, wie der verbleibende Speicherplatz anhand der verschiedenen Werte von berechnet wird flex-grow(zum besseren Verständnis siehe CodePen).
Alle Elemente haben den flex-growWert 1, mit Ausnahme des dritten flex-growElements mit dem Wert 2. Wenn der verfügbare Speicherplatz verteilt ist, hat das dritte Flex-Element doppelt so viel Speicherplatz wie andere.
Browser-Unterstützung
- ( h ) bedeutet , die kürzlich von der Syntax - Spezifikation (z
display: flex;) - (hybrid) bedeutet eine ungerade nicht offizielle Syntax ab 2011 (z
display: flexbox;) - (alt) bedeutet die alte Syntax von 2009 (zB
display: box;)
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (alt) | 3.1+ (alt) | 2-21 (alt) 22+ (neu) | 12.1+ (modern) | 10+ (Hybrid) | 2.1+ (alt) | 3,2+ (alt) |
Blackberry Browser 10+ unterstützt die neue Syntax.
Weitere Informationen zum Mischen von Syntaxen, um die beste Browserunterstützung zu erhalten, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera).