CSS flex-Eigenschaft
Die CSS-Eigenschaft flex legt fest, wie stark Elemente im Container wachsen oder schrumpfen sollen. Mit Beispielen erklärt.
Die flex-Eigenschaft legt die Komponenten einer flexiblen Länge fest. Sie ist eine Kurzschreibweise für folgende Eigenschaften:
Alle drei Komponenten sind in der Kurzschreibweise optional. Wenn sie weggelassen werden, ist der Standardwert von flex-grow 1, von flex-shrink 1 und von flex-basis auto. Beachten Sie, dass der flex-shrink-Faktor beim Verteilen von negativem Raum mit dem flex-basis-Wert multipliziert wird.
Die flex-Eigenschaft ist eine der CSS3-Eigenschaften.
Diese Eigenschaft ist Teil des Flexible Box Layout-Moduls. Wenn keine flexiblen Elemente vorhanden sind, hat die flex-Eigenschaft keine Wirkung.
Das Schlüsselwort auto entspricht 1 1 auto. Es bemisst das Element anhand der width/height-Eigenschaften. Ist die Hauptgrößeneigenschaft des Elements auf auto gesetzt, wird die Größe des Flex-Elements anhand seines Inhalts bestimmt.
Das Schlüsselwort initial entspricht 1 0 auto. Es bemisst das Element anhand seiner width/height-Eigenschaften (oder seines Inhalts, falls diese nicht gesetzt sind). Dadurch ist das Flex-Element unflexibel, wenn freier Platz vorhanden ist, und es schrumpft nicht, wenn nicht genug Platz vorhanden ist. Ausrichtungstechniken oder automatische Abstände werden verwendet, um die Flex-Elemente entlang der Hauptachse auszurichten.
Das Schlüsselwort none entspricht 0 0 auto. Es bemisst das Element gemäß den width- und height-Eigenschaften. Es ist vollständig unflexibel.
Hinweis: Die Anfangswerte von flex-grow und flex-shrink unterscheiden sich von ihren Standardwerten, wenn sie nicht in der flex-Kurzschreibweise enthalten sind, damit häufige Anwendungsfälle besser abgedeckt werden können.
| Anfangswert | 0 1 auto |
|---|---|
| Gilt für | Flex-Elemente, einschließlich In-Flow-Pseudo-Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. |
| Version | CSS3 |
| DOM-Syntax | Object.style.flex = "1"; |
Syntax
Syntax der CSS flex-Eigenschaft
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;Die Werte können in beliebiger Reihenfolge angegeben werden. Bei Verwendung von flex-basis können auch min-width- oder min-height-Beschränkungen angewendet werden, um zu verhindern, dass das Element unter eine bestimmte Größe schrumpft.
Beispiel der flex-Eigenschaft:
Beispiel der CSS flex-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: flex;
}
.box div {
flex: 1;
}
.green {
background-color: #8ebf42;
}
.blue {
background-color: #1c87c9;
}
.gray {
background-color: #666666;
}
</style>
</head>
<body>
<h2>Flex property example</h2>
<div class="box">
<div class="green">GREEN</div>
<div class="blue">BLUE</div>
<div class="gray">GRAY</div>
</div>
</body>
</html>Ergebnis
Beispiel der flex-Eigenschaft mit dem Wert "flex-grow":
Beispiel der CSS flex-Eigenschaft mit dem flex-grow-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 4;
}
.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 example</h2>
<div class="box">
<div style="background-color: #eee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #ccc;"></div>
<div style="background-color: #666;"></div>
</div>
</body>
</html>Beispiel der flex-Eigenschaft mit dem Wert "flex-shrink":
Beispiel der CSS flex-Eigenschaft mit dem flex-shrink-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: flex;
}
.box div {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Flex-shrink 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>Häufige Kurzschreibweisen
Einige flex-Werte tauchen so häufig auf, dass es sich lohnt, sie auswendig zu lernen:
flex: 1(=1 1 0) — das Element wächst und schrumpft frei, ausgehend von einer Basisgröße von0. Auf jedes Kind-Element angewendet, werden damit gleich breite Spalten erzeugt, unabhängig vom Inhalt.flex: auto(=1 1 auto) — wächst und schrumpft, aber die Ausgangsgröße ist der Inhalt/widthdes Elements. Elemente teilen den verbleibenden Raum, behalten aber ihre natürlichen Proportionen.flex: none(=0 0 auto) — ein festes, unflexibles Element. Geeignet für eine Seitenleiste oder einen Button, der seine Größe behalten muss, während sich Geschwisterelemente anpassen.flex: 0 0 200px— fest auf200px: Es wächst weder noch schrumpft es; nützlich für eine Spalte mit fester Breite.
Ein häufiger Fallstrick: flex: 1 verwendet einen flex-basis-Wert von 0, sodass die natürliche Breite des Inhalts ignoriert wird und die Spalten wirklich gleich breit werden. Wenn Sie stattdessen Spalten wünschen, die nach ihrem Inhalt bemessen sind, aber trotzdem dehnen können, verwenden Sie flex: auto.
Werte
| Wert | Beschreibung |
|---|---|
| flex-grow | Gibt an, wie stark das Element im Verhältnis zu den übrigen flexiblen Elementen desselben Containers wächst. |
| flex-shrink | Gibt an, wie stark das Element im Verhältnis zu den übrigen flexiblen Elementen desselben Containers schrumpft. |
| flex-basis | Legt die Länge des Elements durch "auto", "inherit" oder eine Zahl gefolgt von "%", "px", "em" usw. fest. |
| auto | Entspricht 1 1 auto. |
| initial | Entspricht 1 0 auto. |
| none | Entspricht 0 0 auto. |
| inherit | Erbt diese Eigenschaft vom übergeordneten Element. |