flex-shrink CSS property

Probieren Sie es aus

flex-shrink: 0;

flex-shrink: 1;

flex-shrink: 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">I shrink</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 300px;
}

Syntax

/* <number> values */
flex-shrink: 2;
flex-shrink: 0.6;

/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: revert;
flex-shrink: revert-layer;
flex-shrink: unset;

Werte

Diese Eigenschaft wird als folgender Wert angegeben:

<number>

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

Beschreibung

Die flex-shrink-Eigenschaft gibt den Flex-Schrumpffaktor an, der bestimmt, wie stark das Flex-Element relativ zu den anderen Flex-Elementen 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 der flex-shrink-Wert positiv ist, werden die Elemente schrumpfen, damit sie den Container nicht überlaufen.

Die flex-grow-Eigenschaft befasst sich mit der Verteilung des verfügbaren positiven freien Raumes proportional zum flex-grow-Faktor jedes Elements, wobei der Wert der flex-grow-Eigenschaft die einzige Überlegung ist. Die flex-shrink-Eigenschaft verwaltet das Entfernen von negativem freien Raum, um die Kästchen in ihren Container ohne Überlauf zu passen. Das Entfernen von Raum ist etwas komplizierter als das Hinzufügen von Raum. Der Flex-Schrumpffaktor wird mit der Flex-Basisgröße multipliziert; dies verteilt negativen Raum proportional dazu, wie stark das Element schrumpfen kann. Dadurch wird verhindert, dass kleinere Elemente auf 0px schrumpfen, bevor ein größeres Element merklich reduziert wird.

Im Allgemeinen wird flex-shrink zusammen mit den Eigenschaften flex-grow und flex-basis verwendet. Innerhalb der flex-Kurzform ist der Schrumpffaktor immer das zweite <number>. Wenn die Kurzform nur einen Zahlenwert enthält, wird dieser Wert als flex-grow-Wert angenommen.

Formale Definition

Formale Syntax

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

Beispiele

Festlegen des Schrumpffaktors von Flex-Elementen

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, die zusammen eine Breite haben, die größer als die Breite ihres übergeordneten Flex-Containers ist.

HTML

<div id="content">
  <div class="box1">A</div>
  <div class="box2">B</div>
  <div class="box3">C</div>
  <div class="box4">D</div>
  <div class="box5">E</div>
</div>

CSS

Wir geben jedem Flex-Element eine width von 200px. Da die flex-basis-Eigenschaft standardmäßig auf auto gesetzt ist, hat jedes Element eine flex-basis von 200px. Dies ergibt eine Gesamtbreite der Flex-Elemente 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, sodass sie mehr schrumpfen.

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

#content div {
  width: 200px;
}

.box1,
.box2,
.box3 {
  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;
}
.box1 {
  background-color: red;
}
.box2 {
  background-color: lightblue;
}
.box3 {
  background-color: yellow;
}
.box4 {
  background-color: lightsalmon;
}
.box5 {
  background-color: lightgreen;
}

Ergebnis

Die Flex-Elemente überlaufen ihren Container nicht, weil sie schrumpfen können: Die 500px negativer freier Raum wird unter den fünf Elementen basierend auf ihren flex-shrink-Werten verteilt. Die Summe aller Schrumpfwerte für die fünf Elemente beträgt 1 + 1 + 1 + 1.5 + 2 = 6.5. Daher wird die Breite der Elemente mit flex-shrink: 1 um 1/6.5 * 500px = 76.92px reduziert, die Breite der Elemente mit flex-shrink: 1.5 um 1.5/6.5 * 500px = 115.38px und die Breite der Elemente mit flex-shink: 2 um 2/6.5 * 500px = 153.85px.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Grundlegende Konzepte von Flexbox
• Steuern der Verhältnisse von Flex-Elementen entlang der Hauptachse
• CSS-Flexible Box Layout-Modul