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;

Beschreibung

Die flex-shrink-Eigenschaft bestimmt den Flex-Schrumpffaktor, der festlegt, wie stark das Flex-Element im Verhältnis zu den restlichen 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 flex-shrink einen positiven Wert hat, werden die Elemente schrumpfen, um ein Überlaufen des Containers zu verhindern.

Die flex-grow-Eigenschaft kümmert sich um die Verteilung des verfügbaren positiven freien Raums proportional zu jedem Element gemäß dessen Flex-Wachstumsfaktor, wobei der Wert der flex-grow-Eigenschaft als einzige Überlegung dient. Die flex-shrink-Eigenschaft verwaltet das Entfernen von negativem freiem Raum, um die Boxen ins Behältnis zu passen, ohne überzufließen. Das Entfernen von Raum ist etwas komplizierter als das Hinzufügen von Raum. Der Flex-Schrumpffaktor wird mit der Flex-Größe multipliziert; dies verteilt den negativen Raum proportional zu dem Maß, in dem das Element schrumpfen kann. Dies 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-Kurzschreibweise ist der Schrumpffaktor immer die zweite <number>. Wenn die Kurzschreibweise nur einen Zahlenwert enthält, wird dieser Wert als flex-grow-Wert angenommen.

Werte

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

<number>

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

Formale Definition

Formale Syntax

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

Beispiele

Schrumpffaktor von Flex-Elementen einstellen

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 ist als die Breite des übergeordneten 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-Element eine width von 200px. Da die Eigenschaft flex-basis standardmäßig auf auto steht, hat jedes Element eine Flex-Basis von 200px. Dies 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, 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 laufen nicht über ihren Container hinaus, weil sie in der Lage sind zu schrumpfen: die 500px negativer freier Raum werden unter den fünf Elementen anhand ihrer flex-shrink-Werte 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 die der anderen, wobei E kleiner als D ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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