DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die flex-grow Eigenschaft ist eine Untereigenschaft des Flexible Box Layout Moduls.
Sie definiert die Fähigkeit eines Flex-Elements zu wachsen, falls erforderlich. Sie akzeptiert einen nicht-dimensionalen Wert, der als Proportion dient. Sie gibt an, wie viel des verfügbaren Platzes innerhalb des Flex-Containers das Element einnehmen soll.
.element {
flex-grow: 2;
}Wenn beispielsweise alle Elemente flex-grow auf 1 gesetzt haben, wird jedes Kind gleich groß innerhalb des Containers sein. Wenn Sie einem der Kinder einen Wert von 2 geben würden, würde dieses Kind doppelt so viel Platz einnehmen wie die anderen.
Syntax
flex-grow: <number>Demo
Die folgende Demo zeigt, wie der verbleibende Platz gemäß den verschiedenen Werten von flex-grow berechnet wird (siehe CodePen für ein besseres Verständnis).
Alle Elemente haben einen flex-grow Wert von 1, außer dem 3. Element, das einen flex-grow Wert von 2 hat. Das bedeutet, wenn der verfügbare Platz verteilt wird, hat das 3. Flex-Element doppelt so viel Platz wie die anderen.
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10 1 11 | Alle | 20+ | 22-28 2 29+ | 7-8 2 9+ | 12.1+ |
| iOS | Chrome Android | Firefox Android | Android | Opera Mobile |
|---|---|---|---|---|
| 7-8.4 2 9+ | 22-28 2 29+ | 90+ | 92+ | 12.1+ |
- 1 Verwendet den nicht-standardmäßigen Namen
-ms-flex-positive - 2 Unterstützt mit Präfix
-webkit-
Blackberry Browser 10+ unterstützt die neue Syntax.
Für weitere Informationen darüber, wie man Syntaxes mischt, um die beste Browserunterstützung zu erhalten, siehe „Using Flexbox“ oder diesen Artikel von DevOpera.
Weitere Informationen
- flex-grow in den Spezifikationen
- flex-grow bei MDN
- Erweitertes Browser-übergreifendes Flexbox
- Ein Leitfaden zu Flexbox
Alle Safari unterstützen flex-grow nicht
Nur ein Update
Safari 6.1+ unterstützt -webkit-flex-grow
http://www.w3schools.com/cssref/css3_pr_flex-grow.asp
Perfekt erklärt. Klar und auf den Punkt. Danke.
„Wenn beispielsweise alle Elemente
flex-growauf 1 gesetzt haben, wird jedes Kind gleich groß innerhalb des Containers sein. Wenn Sie einem der Kinder einen Wert von 2 geben würden, würde dieses Kind doppelt so viel Platz einnehmen wie die anderen.“Das ist nicht korrekt? Soweit ich weiß, verteilt flex-grow den verfügbaren Leerraum, es steuert nicht die endgültige Breite des Elements. Das Kind mit flex-grow auf 2 wäre nur doppelt so breit, wenn keines der Kinder Inhalt hätte.
Das kann man im CodePen-Beispiel sehen; sobald man mehr Text in eine Flex-Element-Box eingibt, ändern sich die Breiten aller Boxen.
Flex-grow verteilt verfügbaren Leerraum, nicht die absolute Breite, zumindest nach meinem Verständnis.
Das ist korrekt! Sie haben es sehr klar erklärt.
Gut erklärt !!!
Hallo, tolle Erklärung!!!
Ich möchte einen Trenner erstellen, um zwei Flex-Elemente zu vergrößern/verkleinern, was ist der beste Weg dafür??
Das ist falsch. Flex-grow gibt keinen Anteil des Platzes vor, den ein Element einnimmt, es sei denn, flex-basis ist null. Es gibt die Größe des Anteils des zusätzlichen Platzes an, den ein Element verwendet, wenn nach Berücksichtigung der Breite jedes Elements zusätzlicher Platz vorhanden ist. Der Unterschied ist groß.