Die flex-shrinkEigenschaft ist eine Untereigenschaft des Moduls Flexible Box Layout.
Es gibt den „Flex-Schrumpfungsfaktor“ an, der bestimmt, um wie viel das Flex-Element im Vergleich zu den übrigen Flex-Elementen im Flex-Container schrumpft, wenn nicht genügend Platz in der Zeile vorhanden ist.
Wenn es weggelassen wird, wird es auf gesetzt 1und der Flex-Schrumpfungsfaktor wird mit der Flex-Basis multipliziert, wenn der negative Raum verteilt wird.
Syntax
flex-shrink: .flex-item ( flex-shrink: 2; )Demo
Um das volle Potenzial dieser Demo auszuschöpfen, müssten Sie in der Lage sein, ihre Breite zu ändern. Schauen Sie sie sich also direkt auf CodePen an.
In dieser Demo:
- Das erste Element hat
flex: 1 1 20em( eine Abkürzung fürflex-grow: 1,flex-shrink: 1,flex-basis: 20em) - Das zweite Element hat
flex: 2 2 20em( eine Abkürzung fürflex-grow: 2,flex-shrink: 2,flex-basis: 20em)
Beide flexiblen Elemente möchten 20 cm breit sein. Aufgrund des Flex-Grow (erster Parameter) nimmt das zweite Kind doppelt so viel Platz ein wie das erste Kind, wenn der Flex-Container größer als 40 em ist. Wenn das übergeordnete Element jedoch weniger als 40 cm breit ist, wird das zweite Kind doppelt so stark rasiert wie das erste Kind, wodurch es kleiner aussieht (aufgrund des zweiten Parameters, Flex-Shrink).
Browser-Unterstützung
- ( h ) bedeutet , die kürzlich von der Syntax - Spezifikation (z
display: flex;) - (hybrid) bedeutet eine ungerade nicht offizielle Syntax ab 2011 (z
display: flexbox;) - (alt) bedeutet die alte Syntax von 2009 (zB
display: box;)
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 21+ (modern) 20- (alt) | 3.1+ (alt) | 2-21 (alt) 22+ (neu) | 12.1+ (modern) | 10+ (Hybrid) | 2.1+ (alt) | 3,2+ (alt) |
Blackberry Browser 10+ unterstützt die neue Syntax.
Weitere Informationen zum Mischen von Syntaxen, um die beste Browserunterstützung zu erhalten, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera).