flex-grow
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
* Some parts of this feature may have varying levels of support.
Die flex-grow
-CSS-Eigenschaft legt den Flex-Wachstumsfaktor fest, der angibt, wie viel der positiven freien Raum des Flex-Containers, falls vorhanden, der Hauptgröße des Flex-Elements zugewiesen werden soll.
Wenn die Hauptgröße des Flex-Containers größer ist als die kombinierten Hauptgrößen seiner Flex-Elemente, kann dieser positive freie Raum unter den Flex-Elementen verteilt werden, wobei das Wachstum jedes Elements ihrem Wachstumsfaktorwert als Verhältnis der Summe aller Flex-Wachstumsfaktoren der Elemente entspricht.
Hinweis:
Es wird empfohlen, das flex
-Shorthand mit einem Schlüsselwortwert wie auto
oder initial
zu verwenden, anstatt flex-basis
allein festzulegen. Die Schlüsselwortwerte erweitern sich zu verlässlichen Kombinationen von flex-grow
, flex-shrink
und flex-basis
, die helfen, die häufig gewünschten Flex-Verhaltensweisen zu erreichen.
Probieren Sie es aus
flex-grow: 1;
flex-grow: 2;
flex-grow: 3;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">I grow</div>
<div>Item Two</div>
<div>Item Three</div>
</section>
.default-example {
border: 1px solid #c5c5c5;
width: auto;
max-height: 300px;
display: flex;
}
.default-example > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
Syntax
/* <number> values */
flex-grow: 3;
flex-grow: 0.6;
/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: revert;
flex-grow: revert-layer;
flex-grow: unset;
Die flex-grow
-Eigenschaft wird als einzelne <number>
angegeben.
Werte
Beschreibung
Diese Eigenschaft gibt an, wie viel vom restlichen Raum im Flex-Container dem Element zugewiesen werden soll (der Flex-Wachstumsfaktor).
Die Hauptgröße ist entweder die Breite oder Höhe des Elements, abhängig vom flex-direction
-Wert.
Der restliche Raum, oder positive freie Raum, ist die Größe des Flex-Containers minus der Größe aller zusammengelegten Flex-Elemente. Wenn alle benachbarten Elemente den gleichen Flex-Wachstumsfaktor haben, erhalten alle Elemente den gleichen Anteil des restlichen Raums. Üblich ist es, flex-grow: 1
zu setzen, aber wenn der Flex-Wachstumsfaktor für alle Flex-Elemente auf 88
, 100
, 1.2
oder jeden anderen Wert größer als 0
gesetzt wird, ergibt sich das gleiche Ergebnis: Der Wert ist ein Verhältnis.
Wenn die flex-grow
-Werte unterschiedlich sind, wird der positive freie Raum gemäß dem durch die verschiedenen Flex-Wachstumsfaktoren definierten Verhältnis verteilt. Die flex-grow
-Faktorwerte aller benachbarten Flex-Elemente werden zusammengezählt. Der positive freie Raum des Flex-Containers, falls vorhanden, wird dann durch diese Summe geteilt. Die Hauptgröße jedes Flex-Elements mit einem flex-grow
-Wert größer als 0
wird um diesen Quotienten multipliziert mit ihrem eigenen Wachstumsfaktor wachsen.
Zum Beispiel, wenn vier 100px
Flex-Elemente in einem 700px
Container sind und die Flex-Elemente Wachstumsfaktoren von 0
, 1
, 2
und 3
haben, beträgt die gesamte Hauptgröße der vier Elemente 400px
, was bedeutet, dass 300px
positiven freien Raum zu verteilen sind. Die Summe der vier Wachstumsfaktoren (0 + 1 + 2 + 3 = 6
) beträgt sechs. Daher entspricht jeder Wachstumsfaktor 50px
(300px / 6
). Jedes Flex-Element erhält 50px freien Raum multipliziert mit seinem flex-grow
-Faktor — also 0
, 50px
, 100px
, und 150px
entsprechend. Die gesamten Flex-Elementgrößen werden 100px
, 150px
, 200px
, und 250px
.
flex-grow
wird im Allgemeinen zusammen mit den anderen flex
-Shorthand-Eigenschaften, flex-shrink
und flex-basis
, verwendet. Es wird empfohlen, die flex
-Shorthand-Eigenschaft zu verwenden, um sicherzustellen, dass alle Werte gesetzt sind.
Formale Definition
Anfangswert | 0 |
---|---|
Anwendbar auf | flexible Elemente einschließlich In-Flow-Pseudo-Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | Nummer |
Formale Syntax
flex-grow =
<number [0,∞]>
Beispiele
Wachstumsfaktor des Flex-Elements setzen
In diesem Beispiel entspricht die Summe der sechs flex-grow
-Faktoren acht, was bedeutet, dass jeder Wachstumsfaktorwert 12.5%
des verbleibenden Raums ist.
HTML
<h1>This is a <code>flex-grow</code> example</h1>
<p>
A, B, C, and F have <code>flex-grow: 1</code> set. D and E have
<code>flex-grow: 2</code> set.
</p>
<div id="content">
<div class="box1">A</div>
<div class="box2">B</div>
<div class="box3">C</div>
<div class="box4">D</div>
<div class="box5">E</div>
<div class="box6">F</div>
</div>
CSS
#content {
display: flex;
}
div > div {
border: 3px solid rgb(0 0 0 / 20%);
}
.box1,
.box2,
.box3,
.box6 {
flex-grow: 1;
}
.box4,
.box5 {
flex-grow: 2;
border: 3px solid rgb(0 0 0 / 20%);
}
.box1 {
background-color: red;
}
.box2 {
background-color: lightblue;
}
.box3 {
background-color: yellow;
}
.box4 {
background-color: brown;
}
.box5 {
background-color: lightgreen;
}
.box6 {
background-color: brown;
}
Ergebnis
Wenn die sechs Flex-Elemente entlang der Hauptachse des Containers verteilt werden, und die Summe des Hauptinhalts dieser Flex-Elemente kleiner ist als die Größe der Hauptachse des Containers, wird der zusätzliche Raum unter den Größen der Flex-Elemente verteilt, wobei A
, B
, C
und F
jeweils 12.5%
des restlichen Raumes und D
und E
jeweils 25%
des zusätzlichen Raums erhalten.
Spezifikationen
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-grow-property |
Browser-Kompatibilität
Siehe auch
flex
Shorthand- Grundkonzepte von Flexbox
- Verhältnissteuerung von Flex-Elementen entlang der Hauptachse
- CSS flexible box layout Modul
flex-grow
is weird. Or is it? über CSS-Tricks (2017)