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 mit folgendem Wert angegeben:

<number>

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

Beschreibung

Die flex-shrink-Eigenschaft gibt den Flex-Shrink-Faktor an, der bestimmt, wie stark das Flex-Item im Verhältnis zu den anderen Flex-Items 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-Items berechnet und feststellt, dass diese zu groß sind, um in den Flex-Container zu passen. Solange flex-shrink einen positiven Wert hat, werden die Items schrumpfen, um ein Überlaufen des Containers zu verhindern.

Die flex-grow-Eigenschaft befasst sich mit der Verteilung des verfügbaren positiven freien Raums proportional zum Flex-Grow-Faktor jedes Items, wobei nur der Wert der flex-grow-Eigenschaft berücksichtigt wird. Die flex-shrink-Eigenschaft verwaltet die Entfernung von negativem freiem Raum, um die Boxen ohne Überlaufen in ihren Container zu passen. Das Entfernen von Raum ist etwas komplizierter als das Hinzufügen von Raum. Der Flex-Shrink-Faktor wird mit der Flex-Basisgröße multipliziert; dies verteilt negativen Raum im Verhältnis dazu, wie stark das Item schrumpfen kann. Dies verhindert, dass kleinere Items auf 0px schrumpfen, bevor ein größeres Item merklich reduziert wird.

Im Allgemeinen wird flex-shrink zusammen mit den Eigenschaften flex-grow und flex-basis verwendet. Innerhalb der flex Kurzform ist der Shrink-Faktor immer die zweite <number>. Wenn die Kurzform nur einen Zahlenwert enthält, wird davon ausgegangen, dass dieser Wert der flex-grow-Wert ist.

Formale Definition

Formale Syntax

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

Beispiele

Festlegen des Schrumpffaktors eines Flex-Items

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

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-Item eine width von 200px. Da die flex-basis-Eigenschaft standardmäßig auf auto steht, hat jedes Item eine Flex-Basis von 200px. Dies ergibt für die Flex-Items eine Gesamtbreite von 1000px, also das Doppelte der Containergröße. Wir setzen alle Flex-Items auf schrumpfbar, mit flex-shrink-Werten größer als 0. Die letzten beiden Items haben größere flex-shrink-Werte, sodass sie mehr schrumpfen werden.

#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-Items überlaufen ihren Container nicht, da sie schrumpfen können: Die 500px negativer freier Raum werden basierend auf ihren flex-shrink-Werten auf die fünf Items verteilt. Die Summe aller Schrumpfwerte für die fünf Items beträgt 1 + 1 + 1 + 1.5 + 2 = 6.5. Folglich wird die Breite der Items mit flex-shrink: 1 um 1/6.5 * 500px = 76.92px reduziert, die Breite der Items mit flex-shrink: 1.5 um 1.5/6.5 * 500px = 115.38px, und die Breite der Items mit flex-shrink: 2 um 2/6.5 * 500px = 153.85px.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Grundlegende Konzepte von Flexbox
• Verhältnissteuerung von Flex-Items entlang der Hauptachse
• CSS Flexibler Box Layout Modul