CSS flex-Eigenschaft
Die flex-Eigenschaft definiert die Komponenten einer flexiblen Länge. Sie ist eine Kurzschreibweise für die folgenden Eigenschaften:
Alle drei Komponenten sind in der Kurzschreibweise optional. Wenn sie weggelassen werden, beträgt der Standardwert für flex-grow 1, für flex-shrink 1 und für flex-basis auto. Beachten Sie, dass der flex-shrink-Faktor bei der Verteilung 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 es keine flexiblen Elemente gibt, hat die flex-Eigenschaft keine Auswirkung.
Das Schlüsselwort auto ist äquivalent zu 1 1 auto. Es passt die Größe des Elements basierend auf den Breiten-/Höhen-Eigenschaften an. Wenn die Hauptgrößen-Eigenschaft des Elements auf auto gesetzt ist, wird die Größe des Flex-Elements basierend auf seinem Inhalt festgelegt.
Das Schlüsselwort initial ist äquivalent zu 1 0 auto. Es passt die Größe des Elements basierend auf seinen Breiten-/Höhen-Eigenschaften an (oder basierend auf seinem Inhalt, falls nicht festgelegt). Dadurch wird das Flex-Element bei vorhandenem Freiraum starr und schrumpft nicht, wenn nicht genug Platz vorhanden ist. Ausrichtungstechniken oder automatische Ränder werden verwendet, um die Flex-Elemente entlang der Hauptachse auszurichten.
Das Schlüsselwort none ist äquivalent zu 0 0 auto. Es passt die Größe des Elements gemäß den Breiten- und Höhen-Eigenschaften an. Es ist vollständig starr.
INFO
Hinweis: Die Anfangswerte für flex-grow und flex-shrink unterscheiden sich von ihren Standardwerten, wenn sie nicht in der flex-Kurzschreibweise enthalten sind, um häufige Anwendungsfälle besser abzudecken.
| Anfangswert | 0 1 auto |
|---|---|
| Gilt für | Flex-Elemente, einschließlich in-Flow-Pseudo-Elemente. |
| Vererbt | 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 der Verwendung von flex-basis können Sie auch min-width- oder min-height-Einschränkungen anwenden, um zu verhindern, dass das Element unter eine bestimmte Größe schrumpft.
Beispiel für die flex-Eigenschaft:
Beispiel für die 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 für die flex-Eigenschaft mit dem Wert "flex-grow":
Beispiel für die CSS flex-Eigenschaft mit 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 für die flex-Eigenschaft mit dem Wert "flex-shrink":
Beispiel für die CSS flex-Eigenschaft mit 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>Werte
| Wert | Beschreibung |
|---|---|
| flex-grow | Gibt an, wie stark das Element im Vergleich zu den anderen flexiblen Elementen desselben Containers wachsen soll. |
| flex-shrink | Gibt an, wie stark das Element im Vergleich zu den anderen flexiblen Elementen desselben Containers schrumpfen soll. |
| flex-basis | Gibt die Länge des Elements durch "auto", "inherit" oder eine Zahl gefolgt von "%", "px", "em" usw. an. |
| auto | Äquivalent zu 1 1 auto. |
| initial | Äquivalent zu 1 0 auto. |
| none | Äquivalent zu 0 0 auto. |
| inherit | Erbt diese Eigenschaft von seinem übergeordneten Element. |
Praxis
Welche Eigenschaften hat der CSS Flex-Container?