CSS flex-grow Eigenschaft
Die flex-grow-Eigenschaft legt fest, wie stark ein Element wächst. Werte und Beispiele im Überblick.
Die flex-grow-Eigenschaft steuert, wie stark ein Flex-Element wächst, um den freien Platz innerhalb seines Flex-Containers auszufüllen. Der Wert ist ein einheitenloser Wachstumsfaktor, keine Länge: Er beantwortet die Frage „Welchen Anteil des zusätzlichen Platzes soll dieses Element erhalten?"
Wenn jedes Element einen flex-grow-Faktor hat, wird der verbleibende Platz proportional zu diesen Faktoren aufgeteilt. Die Hauptgröße eines Flex-Elements ist entweder seine Breite oder seine Höhe, abhängig von der flex-direction: In einer Zeile wachsen die Elemente horizontal, in einer Spalte vertikal.
Diese Eigenschaft gehört zu den CSS3-Eigenschaften. Sie wird normalerweise zusammen mit flex-shrink (wie Elemente schrumpfen, wenn der Platz knapp wird) und flex-basis (ihre Ausgangsgröße) verwendet. Alle drei werden üblicherweise auf einmal über das flex-Kurzschreibweise gesetzt.
Wie freier Platz verteilt wird
Der Flex-Algorithmus läuft in zwei Schritten ab:
- Jedes Element wird auf seiner
flex-basis-Größe angeordnet (oder seiner Inhaltsgröße, wennflex-basis: auto). - Der freie Platz wird gemessen – die Hauptgröße des Containers minus die Summe der Basisgrößen – und proportional zum
flex-grow-Faktor jedes Elements verteilt.
Wenn die obigen Elemente nahezu keine Breite haben und der Container beispielsweise 600px freien Platz bei Faktoren 1, 2, 1, 1, 1 (Summe 6) hat, ist jede Einheit 600 / 6 = 100px wert. Das Element mit Faktor 2 erhält also 200px Wachstum, während jedes Element mit Faktor 1 100px erhält. Ein doppelter Faktor bedeutet den doppelten Anteil am zusätzlichen Platz – ein Element wird dadurch nicht insgesamt doppelt so breit.
flex-grow hat nur dann eine Wirkung, wenn freier Platz vorhanden ist und die Elemente tatsächlich Flex-Elemente sind (das Elternelement hat display: flex oder display: inline-flex). Ohne freien Platz oder ohne Flex-Elemente hat es keinen Effekt.
| Anfangswert | 0 |
|---|---|
| Gilt für | Flex-Elemente, einschließlich In-Flow-Pseudoelemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. Elemente sind animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.flexGrow = 3; |
Syntax
Syntax der CSS flex-grow-Eigenschaft
flex-grow: number | initial | inherit;Beispiel der flex-grow-Eigenschaft:
Beispiel der CSS flex-grow-Eigenschaft mit einem Zahlenwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 2;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Ergebnis
Beispiel der flex-grow-Eigenschaft mit einem höheren Wachstumsfaktor:
CSS flex-grow-Eigenschaft mit einem Zahlenwert
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 6;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>flex-grow innerhalb der flex-Kurzschreibweise verwenden
flex-grow wird selten allein geschrieben. Das häufigste Muster ist flex: 1, was eine Kurzschreibweise für flex-grow: 1; flex-shrink: 1; flex-basis: 0 ist. Indem die Basis auf 0 gesetzt wird, weist der Browser an, die Inhaltsgröße zu ignorieren und den gesamten Container proportional aufzuteilen. Mehrere Elemente mit flex: 1 sind dadurch exakt gleich breit:
.item {
flex: 1; /* grow:1 shrink:1 basis:0 → equal columns */
}Damit ein Element doppelt so viel Platz wie die anderen erhält, wird sein Wachstumsfaktor erhöht:
.sidebar { flex: 1; }
.main { flex: 2; } /* gets 2/3 of the space, sidebar gets 1/3 */Häufige Fallstricke
- Faktor, nicht Breite.
flex-grow: 2bedeutet nicht „doppelt so breit" – es bedeutet „doppelter Anteil am verbleibenden Platz". Haben Elemente unterschiedliche Inhaltsgrößen, ergibt sich kein sauberes 2:1-Verhältnis, es sei denn,flex-basisist0. - Negative Werte sind ungültig. Sie werden ignoriert, und die Eigenschaft behält ihren vorherigen Wert.
- Kein freier Platz, kein Effekt. Füllen die Elemente den Container bereits aus (oder überlaufen ihn), ändert
flex-grownichts – dieser Fall wird stattdessen von flex-shrink behandelt. - Der Faktor ist einheitenlos. Schreiben Sie nicht
flex-grow: 2px; das ist kein gültiger Wert.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| number | Gibt an, wie stark das Element im Verhältnis zu den anderen flexiblen Elementen desselben Containers wächst. Standardwert ist 0. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt diese Eigenschaft vom Elternelement. |