Die Eigenschaft flex-shrink

Die Eigenschaft flex-shrink legt fest, wie stark ein Flex-Block im Vergleich zu benachbarten Elementen innerhalb des Flex-Containers schrumpft, wenn nicht genügend freier Platz vorhanden ist.

Wenn beispielsweise alle Flex-Blöcke innerhalb eines Flex-Containers flex-shrink:1 haben, dann werden sie gleich groß sein. Wenn einer von ihnen flex-shrink:2 hat, dann wird er 2 mal kleiner sein als alle anderen.

Gilt für: einen bestimmten Flex-Block.

Diese Eigenschaft ist Teil der Kurzschreibweise flex.

Syntax

cssSelektor {
  flex-shrink: positive Zahl;
}

Standardwert: 1.

Beispiel

Nehmen wir an, wir haben 3 Elemente. Die Breite von jedem beträgt 200px, und die Gesamtbreite beträgt 600px, was größer ist als die Breite des übergeordneten Containers, die 350px beträgt:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex-shrink: 1;
}
.elem2 {
  flex-shrink: 2;
}
.elem3 {
  flex-shrink: 3;
}

Результат:

Berechnen wir den negativen freien Raum nach der Formel:

Die gewichtete Gesamtbreite der Elemente unter Berücksichtigung der Werte der Eigenschaft flex-shrink für jedes Element beträgt:

Bestimmen wir nun, um wie viel das erste Element schrumpft:

Zweites Element:

Drittes Element:

Daraus folgt, dass das dritte Element, bei dem der Wert von flex-shrink gleich 3 ist, stärker schrumpft als die anderen Elemente.

Siehe auch