Die Eigenschaft flex-shrink gibt an, wie stark ein Teil im Vergleich zu den anderen Teilen des Flex-Containers verkleinert wird. Wenn die Elemente größer sind als der Container, werden die Elemente verkleinert, um an den flex Container anzupassen. Wenn die Eigenschaft flex-shrink nicht in der Shorthand-Deklaration flex enthalten ist, wird der Wert voreingestellt auf 1 gesetzt. Wenn es keine flexiblen Elemente gibt, hat die Eigenschaft flex-shrink keine Wirkung.
Der Faktor flex-shrink wird bei negativer Raumverteilung mit der Flex-Basis multipliziert.
| Anfangswert | 1 |
| Gilt für | Flex-Elemente, einschließlich In-Flow-Pseudoelemente |
| Geerbt | Nein |
| Animierbar | Ja, die Elemente sind animierbar. |
| Version | CSS3 |
| DOM Syntax | object.style.flexShrink = "4"; |
Syntax
flex-shrink: number | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.box {
width: 320px;
height: 120px;
border: 1px dotted #666;
display: -webkit-flex; /* Safari */
display: flex;
}
.box div {
-webkit-flex-grow: 1; /* Safari 6.1+ */
-webkit-flex-shrink: 3; /* Safari 6.1+ */
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-grow: 1;
flex-shrink: 3;
flex-basis: 100px;
}
.box div:nth-of-type(2) {
-webkit-flex-shrink: 7; /* Safari 6.1+ */
flex-shrink: 7;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft 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 |
|---|---|
| number | Der Wert gibt an, wie stark das Element im Vergleich zu den anderen flexiblen Elementen desselben Containers verkleinert wird. Der Standardwert ist 1. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt 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
Was ist die CSS-Eigenschaft 'flex-shrink' und wie funktioniert sie?
Richtig!
Falsch!