flex-shrink

Die flex-shrink-Eigenschaft spezifiziert den Verkleinerungsfaktor, der bestimmt, wie stark das Flex-Element im Vergleich zu den restlichen Flex-Elementen im Flex-Container schrumpfen wird, wenn negativer freier Raum verteilt wird.

Diese Eigenschaft behandelt 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 geschrumpft, damit sie nicht den Container überfluten.

Die flex-grow-Eigenschaft behandelt die Verteilung des verfügbaren positiven freien Raums proportional zum Wachstumsfaktor jedes Elements, wobei der Wert der flex-grow-Eigenschaft die einzige Überlegung darstellt. Die flex-shrink-Eigenschaft verwaltet das Entfernen von negativem freien Raum, um die Boxen in ihren Container passen zu lassen, ohne dass sie überfluten. Das Entfernen von Raum ist etwas komplizierter als das Hinzufügen von Raum. Der Verkleinerungsfaktor wird mit der Basisgröße des Flex-Elements multipliziert; dies verteilt negativen Raum proportional dazu, wie stark das Element schrumpfen kann. Dies verhindert, dass kleinere Elemente auf 0px schrumpfen, bevor ein größerer Gegenstand merklich reduziert wird.

Im Allgemeinen wird flex-shrink zusammen mit den Eigenschaften flex-grow und flex-basis verwendet. Innerhalb der flex-Kurznotation ist der Verkleinerungsfaktor immer die zweite <number>. Wenn die Kurznotation nur einen numerischen Wert enthält, wird angenommen, dass dieser Wert der flex-grow-Wert ist.

Die flex-shrink-Eigenschaft wird als eine 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 Verkleinerungsfaktor des Elements verteilt wird. Es umfasst fünf Flex-Elemente mit einem flex-shrink-Wert größer als 0, die eine kombinierte Breite haben, die größer ist als die Breite ihres übergeordneten Flex-Containers.

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 Eigenschaft flex-basis standardmäßig auf auto steht, beträgt die flex-basis jedes Elements 200px. Dies gibt den Flex-Elementen eine Gesamtbreite von 1000px, doppelt so groß wie der Container. Wir setzen alle Flex-Elemente so, dass sie verkleinert werden können, mit flex-shrink-Werten größer als 0. Die letzten beiden Elemente haben höhere flex-shrink-Werte festgelegt, sodass sie stärker 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 schrumpfen können: 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 geringer als die der anderen, wobei E kleiner als D ist.

• Grundkonzepte von Flexbox
• Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse
• CSS Flexibler Box-Layout- Modul