DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft flex-shrink ist eine Untereigenschaft des Flexible Box Layout-Moduls.
Sie gibt den "Flex-Shrink-Faktor" an, der bestimmt, wie stark ein Flex-Element relativ zu den anderen Flex-Elementen im Flex-Container schrumpft, wenn nicht genügend Platz in der Zeile vorhanden ist.
.element {
flex-shrink: 2;
}Wenn sie weggelassen wird, wird sie auf 1 gesetzt und der Flex-Shrink-Faktor wird mit der Flex-Basis multipliziert, wenn negativer Platz verteilt wird.
Syntax
flex-shrink: <number>Demo
Um das volle Potenzial dieser Demo zu sehen, müssten Sie ihre Breite ändern können. Schauen Sie sie sich daher bitte direkt auf CodePen an.
In dieser Demo
- Das erste Element hat
flex: 1 1 20em(Kurzschreibweise fürflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Das zweite Element hat
flex: 2 2 20em(Kurzschreibweise fürflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Beide Flex-Elemente möchten 20em breit sein. Aufgrund von `flex-grow` (erster Parameter) nimmt das zweite Kind doppelt so viel freien Platz ein wie das erste Kind, wenn der Flex-Container breiter als 40em ist. Wenn das Elternelement jedoch schmaler als 40em ist, wird vom zweiten Kind doppelt so viel abgezogen wie vom ersten Kind, wodurch es kleiner aussieht (wegen des zweiten Parameters, `flex-shrink`).
Browser-Unterstützung
- (modern) bedeutet die aktuelle Syntax aus der Spezifikation (z. B.
display: flex;) - (hybrid) bedeutet eine ungewöhnliche inoffizielle Syntax von 2011 (z. B.
display: flexbox;) - (old) bedeutet die alte Syntax von 2009 (z. B.
display: box;)
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Alle | 20+ | 22+ | 8+ | 12.1+ |
| iOS | Chrome Android | Firefox Android | Android | Opera Mobile |
|---|---|---|---|---|
| 8+ | Alle | Alle | 92+ | 12.1+ |
Blackberry Browser 10+ unterstützt die neue Syntax.
Weitere Informationen darüber, wie man Syntaxen mischt, um die beste Browserunterstützung zu erzielen, finden Sie unter „Using Flexbox“ oder diesem Artikel von DevOpera.
Weitere Informationen
- flex-shrink in der Spezifikation
- flex-shrink bei MDN
- Erweitertes Browser-übergreifendes Flexbox
- Ein Leitfaden zu Flexbox
- Verwendung von Flexbox
- Altes Flexbox und neues Flexbox
Ich habe die Spezifikation gelesen. Aber ich verstehe sie ohne die Demos nicht, also gehe ich hierher. Ich weiß aber nicht, warum die Demo diesen Effekt hat. Wie wird das berechnet? :(
Das funktioniert auf dem iPad Safari v8.1.3 nicht, obwohl es angeblich kompatibel sein soll.
Das funktioniert auf dem iPad Safari v8.1.3 nicht, obwohl es angeblich kompatibel sein soll.
Funktioniert nicht mit Safari 5.1.7