flex-shrink

Die flex-shrink Eigenschaft legt den Flex-Schrumpffaktor fest, der bestimmt, wie stark das Flex-Element im Vergleich zum Rest der Flex-Elemente im Flex-Container schrumpfen wird, wenn negativer freier Raum verteilt wird.

Diese Eigenschaft befasst sich mit Situationen, in denen der Browser die Flex-Basis-Werte der Flex-Elemente berechnet und feststellt, dass sie zu groß sind, um in den Flex-Container zu passen. Solange flex-shrink einen positiven Wert hat, werden die Elemente schrumpfen, damit sie den Container nicht überlaufen.

Die flex-grow Eigenschaft befasst sich mit der Verteilung des verfügbaren positiven freien Raums proportional zu jedem Element's Flex-Wachstumsfaktor, wobei der Wert der flex-grow Eigenschaft die einzige Überlegung ist. Die flex-shrink Eigenschaft verwaltet das Entfernen von negativem freien Raum, um Boxen so in ihren Container zu passen, dass sie nicht überlaufen. Platz zu entfernen ist etwas komplizierter als Platz hinzuzufügen. Der Flex-Schrumpffaktor wird mit der Flex-Basisgröße multipliziert; dies verteilt negativen Raum proportional dazu, wie viel das Element schrumpfen kann. Dies verhindert, dass kleinere Elemente auf 0px schrumpfen, bevor ein größeres Element merklich reduziert wird.

In der Regel wird flex-shrink zusammen mit den flex-grow und flex-basis Eigenschaften verwendet. Innerhalb der flex-Kurzschreibweise ist der Schrumpffaktor immer die zweite <number>. Wenn die Kurzschreibweise nur einen Zahlenwert enthält, wird angenommen, dass dieser Wert der flex-grow-Wert ist.

Die flex-shrink Eigenschaft wird als einzelne <number> angegeben.

<number>

Siehe <number>. Negative Werte sind ungültig. Standardwert ist 1.

flex-shrink = 
  <number [0,∞]>  

Dieses Beispiel zeigt, wie negativer freier Raum basierend auf dem Schrumpffaktor des Elements verteilt wird. Es umfasst fünf Flex-Elemente mit einem flex-shrink Wert größer als 0, deren kombinierte Breite größer als die Breite ihres übergeordneten Flex-Containers ist.

HTML

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box4" style="background-color:lightsalmon;">D</div>
  <div class="box5" style="background-color:lightgreen;">E</div>
</div>

CSS

Wir geben jedem Flex-Element eine width von 200px. Da die flex-basis-Eigenschaft standardmäßig auf auto steht, ist die Flex-Basis jedes Elements 200px. Das gibt den Flex-Elementen eine Gesamtbreite von 1000px, doppelt so groß wie der Container. Wir setzen alle Flex-Elemente auf schrumpfbar, mit flex-shrink Werten größer als 0. Die letzten beiden Elemente haben größere flex-shrink Werte, damit sie mehr schrumpfen.

#content {
  display: flex;
  width: 500px;
}

#content div {
  width: 200px;
}

.box {
  flex-shrink: 1;
}

.box4 {
  flex-shrink: 1.5;
}

.box5 {
  flex-shrink: 2;
}

#content {
  margin: 5px;
}
div {
  font-family: monospace;
  outline: 1px solid;
  line-height: 4em;
  text-align: center;
}

Ergebnis

Die Flex-Elemente überlaufen ihren Container nicht, da sie in der Lage sind zu schrumpfen: Die 500px negativer freier Raum wird unter den fünf Elementen basierend auf ihren flex-shrink Werten verteilt. Die ersten drei Elemente haben flex-shrink: 1 gesetzt. D hat flex-shrink: 1.5 und E hat flex-shrink: 2 gesetzt. Die endgültige Breite von D und E ist kleiner als bei den anderen, wobei E kleiner als D ist.

• Grundkonzepte von Flexbox
• Steuerung von Verhältnissen von Flex-Elementen entlang der Hauptachse
• CSS flexibles Boxenlayout Modul