CSS flex-shrink-Eigenschaft

Die Eigenschaft flex-shrink steuert, wie stark ein Flex-Element im Vergleich zu den anderen Elementen desselben Containers schrumpft, wenn nicht genug Platz für alle bei ihren bevorzugten Größen vorhanden ist. Sie hat nur dann eine Wirkung, wenn die kombinierte Größe der Elemente größer als der Container ist – dieser Überlauf ist der „negative Raum", der durch das Schrumpfen der Elemente verteilt wird.

Der Wert ist eine einheitenlose Zahl (ein Flex-Faktor), keine Längenangabe. Eine höhere Zahl bedeutet, dass ein Element mehr von seiner Breite (oder Höhe, bei einer Spalte) abgibt als seine Nachbarn. Der Standardwert ist 1, sodass standardmäßig jedes Flex-Element mit derselben Rate schrumpft. Setzen Sie den Wert auf 0, um ein Element auf seiner flex-basis zu fixieren und das Schrumpfen zu verhindern.

flex-shrink ist der dritte Wert in der flex-Kurzschreibweise (flex: grow shrink basis) und gehört zu den CSS3-Eigenschaften.

Info

Bei der Verteilung von negativem Raum wird der flex-shrink-Faktor jedes Elements mit seiner flex-basis multipliziert (oder, wenn flex-basis auto ist, mit der Inhaltsgröße des Elements). Diese Gewichtung bewirkt, dass größere Elemente stärker schrumpfen als kleinere, selbst wenn ihre Schrumpffaktoren gleich sind – so wird verhindert, dass ein kleines Element auf nichts zusammenschrumpft, während ein großes seine Größe behält.

Berechnung des Schrumpfens

Angenommen, ein Flex-Container ist 400px breit und enthält zwei Elemente, deren flex-basis-Werte zusammen 600px ergeben – es gibt 200px Überlauf aufzunehmen. Wenn beide Elemente dieselbe flex-basis von 300px und Schrumpffaktoren von 1 und 3 haben, sind die gewichteten Anteile 300×1 = 300 und 300×3 = 900, insgesamt 1200. Jedes Element gibt den Überlauf proportional zu seinem Anteil ab:

Element A entfernt 200 × (300 / 1200) = 50px → endet bei 250px.
Element B entfernt 200 × (900 / 1200) = 150px → endet bei 150px.

Das Element mit flex-shrink: 3 verliert also dreimal so viel Breite wie das mit flex-shrink: 1. Die beiden Endbreiten ergeben zusammen wieder die 400px des Containers.

Wann flex-shrink einsetzen

Ein festes Element schützen. Geben Sie einer Seitenleiste, einem Logo oder einem Symbol flex-shrink: 0, damit es seine Größe behält, während der flexible Inhalt drum herum schrumpft.
Priorisieren, was zuerst schrumpft. Erhöhen Sie den Faktor bei weniger wichtigen Elementen, sodass sie kollabieren, bevor der Hauptinhalt es tut.
Flexible Toolbars und Navbars erstellen. Lassen Sie Schaltflächen gemeinsam schrumpfen, wenn das viewport schmaler wird, anstatt zu überlaufen oder umzubrechen. | Initialwert | 1 | |---|---| | Gilt für | Flex-Elemente, einschließlich In-Flow-Pseudoelemente. | | Vererbbar | Nein. | | Animierbar | Ja. Elemente sind animierbar. | | Version | CSS3 | | DOM-Syntax | object.style.flexShrink = "4"; |

Syntax

Syntax der CSS flex-shrink-Eigenschaft

flex-shrink: number | initial | inherit;

Eine einheitenlose Zahl legt den Flex-Faktor fest; initial setzt ihn auf 1 zurück und inherit übernimmt den Wert des übergeordneten Elements.

Beispiel der flex-shrink-Eigenschaft

Im folgenden Beispiel starten alle Elemente mit einer flex-basis von 100px (sodass 500px Inhalt um eine 320px-Box konkurrieren). Das zweite Element hat flex-shrink: 7, während die anderen 3 haben, sodass es mehr als doppelt so schnell schrumpft und am schmalsten endet.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS flex-shrink-Eigenschaft](/uploads/media/default/0001/05/b413d578abc6b2c3b0a052506081df9c0183e432.png "CSS flex-shrink property example" =420x)

Verhindern, dass ein Element schrumpft

Setzen Sie flex-shrink: 0, um ein Element auf seiner Basis zu halten, während seine Geschwister den gesamten Überlauf aufnehmen. Hier bleibt die Seitenleiste 200px breit und nur der Inhaltsbereich schrumpft:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: flex;
        width: 320px;
        border: 1px dotted #666666;
      }
      .sidebar {
        flex-basis: 200px;
        flex-shrink: 0;        /* never shrinks */
        background-color: #1c87c9;
      }
      .content {
        flex-basis: 200px;
        flex-shrink: 1;        /* shrinks to make room */
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </body>
</html>

Die beiden Basiswerte ergeben zusammen 400px in einer 320px-Box, sodass 80px entfernt werden müssen. Da die Seitenleiste das Schrumpfen verweigert, nimmt der Inhaltsbereich alle 80px auf und wird mit 120px gerendert.

Werte

Wert	Beschreibung	Ausprobieren
number	Gibt an, wie stark das Element im Verhältnis zu den anderen flexiblen Elementen desselben Containers schrumpft. Standardwert ist 1.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt diese Eigenschaft vom übergeordneten Element.

Übung

Was ist die Funktion der 'flex-shrink'-Eigenschaft in CSS?

Sie definiert die Fähigkeit eines Flex-Elements, bei Bedarf zu wachsen.Sie legt die Ausrichtung zwischen den Zeilen in einem flexiblen Container fest, wenn die Elemente nicht den gesamten verfügbaren Platz nutzen.Sie definiert die Fähigkeit eines Flex-Elements, bei Bedarf zu schrumpfen.Sie ermöglicht die Steuerung, wie ein Flex-Container entlang der Querachse angeordnet wird.Sie bestimmt die Reihenfolge, in der die Flex-Elemente im Flex-Container angezeigt und angeordnet werden.