Die Eigenschaft flex definiert die Komponenten einer flexiblen Länge. Es ist eine Abkürzung für die Eigenschaften flex-grow, flex-shrink und flex-basis. Flex-shrink und flex-basis sind optional, d. h. man muss sie nicht in die Deklaration flex aufnehmen.
Die Eigenschaft flexist ein Teil des Moduls Flexible Box Layout module. Wenn es keine flexiblen Elemente gibt, hat die Eigenschaft flex keine Wirkung.
Wenn Sie die Eigenschaft flex-grow nicht in die Shorthand-Deklaration aufnehmen, wird der Wert standardmäßig auf 1 gesetzt. Wenn Sie die Eigenschaft flex-shrink nicht in die Shorthand-Deklaration aufnehmen, wird der Wert standardmäßig auf 1 gesetzt. Beachten Sie, dass der Faktor flex-shrink mit flex-basis multipliziert wird, wenn der negative Raum verteilt wird. Wenn die Eigenschaft flex-basis nicht berücksichtigt wird, wird ihr Wert auf 0% gesetzt.
"Auto" ist der Standardwert der Eigenschaft. Dieser Wert bestimmt die Größe des Elements aufgrund der Eigenschaften width/height. (Wenn die Hauptgrößeneigenschaft des Elements auf "auto" gesetzt wird, wird das Element flex anhand seines Inhalts bewertet.)
"Initial" dimensioniert das Element aufgrund seiner Eigenschaften width/height (oder seinem Inhalt, falls nicht gesetzt). Es macht flex unflexibel, wenn noch etwas freier Platz vorhanden ist, lässt es aber auf sein Minimum schrumpfen, wenn nicht genügend Platz vorhanden ist. Die Ausrichtungsmöglichkeiten oder automatischen Ränder können genutzt werden, um Flex-Items entlang der Hauptachse auszurichten.
"None" wird nach seinen Eigenschaften width und height bemessen. Sie ist völlig unflexibel.
| Anfangswert | 0 1 auto |
| Gilt für | Flex-Items, eingeschlossen In-Flow-Pseudo-Elemente |
| Geerbt | Nein |
| Animierbar | Ja |
| Version | CSS3 |
| DOM Syntax | Object.style.flex = "1"; |
Syntax
flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<title>Der Titel des Dokuments</title>
<head>
<style>
.box {
width: 350px;
height: 200px;
padding-left: 0;
list-style-type: none;
border: 1px dashed black;
display: -webkit-flex;
display: flex;
}
.box div {
flex: 1;
}
.green {background-color: #8ebf42}
.blue {background-color: #1c87c9;}
.gray {background-color: #666}
</style>
</head>
<body>
<h2>Beispiel für die Eigenschaft flex</h2>
<div class="box">
<div class="green">GRÜN</div>
<div class="blue">BLAU</div>
<div class="gray">GRAU</div>
</div>
</body>
</html>Ein Beispiel, wo eines der Elemente wächst.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: -webkit-flex; /* Safari */
display: flex;
}
/* Safari 6.1+ */
.box div:nth-of-type(1) {-webkit-flex-grow: 1;}
.box div:nth-of-type(2) {-webkit-flex-grow: 4;}
.box div:nth-of-type(3) {-webkit-flex-grow: 1;}
.box div:nth-of-type(4) {-webkit-flex-grow: 1;}
.box div:nth-of-type(5) {-webkit-flex-grow: 1;}
/* Standard syntax */
.example div:nth-of-type(1) {flex-grow: 1;}
.example div:nth-of-type(2) {flex-grow: 4;}
.example div:nth-of-type(3) {flex-grow: 1;}
.example div:nth-of-type(4) {flex-grow: 1;}
.example div:nth-of-type(5) {flex-grow: 1;}
</style>
</head>
<body>
<h2>Beispiel für flex-grow</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>Ein weiteres Beispiel mit flex-shrink und flex-shrink.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px solid #666;
display: -webkit-flex; /* Safari */
display: flex;
}
.box div {
-webkit-flex-grow: 1; /* Safari 6.1+ */
-webkit-flex-shrink: 2; /* Safari 6.1+ */
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
-webkit-flex-shrink: 5; /* Safari 6.1+ */
flex-shrink: 5;
}
</style>
</head>
<body>
<h2>Beispiel für flex-shrink</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>Werte
| Wert | Beschreibung |
|---|---|
| flex-grow | Gibt an, wie stark das Objekt im Vergleich zu den anderen flexiblen Elementen desselben Containers wachsen wird. |
| flex-shrink | Gibt an, wie stark das Element im Vergleich zu den anderen flexiblen Elementen desselben Containers verkleinert wird. |
| flex-basis | Bezeichnet die Länge des Elements durch "auto", "inherit" oder eine Zahl gefolgt von "%", "px", "em" usw. |
| auto | Äquivalent zu 1 1 auto. |
| initial | Äquivalent zu 1 0 auto. |
| none | Äquivalent zu 0 0 auto. |
| inherit | Es erzeugt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
|
29.0+ 21-28 -webkit- |
28.0+ |
9.0+ 6.1-8.0 -webkit- |
12.1+ |
Übe dein Wissen
