CSS flex-shrink-Eigenschaft

Die flex-shrink-Eigenschaft legt fest, um wie viel sich das Element im Verhältnis zu den anderen Elementen des Flex-Containers verkleinert. Wenn die Größe der Elemente größer als die des Containers ist, schrumpfen die Elemente, um in den Flex-Container zu passen. Wenn die flex-shrink-Eigenschaft nicht in der Flex-Shorthand-Deklaration enthalten ist, wird der Wert standardmäßig auf 1 gesetzt. Gibt es keine flexiblen Elemente, hat die flex-shrink-Eigenschaft keine Auswirkung.

Die flex-shrink-Eigenschaft ist eine der CSS3-Eigenschaften.

INFO

Der flex-shrink-Faktor wird mit der flex-basis multipliziert (oder der Inhaltgröße des Elements, wenn flex-basis auto ist), wenn negativer Raum verteilt wird.

Anfangswert	1
Anwendbar auf	Flex-Elemente, einschließlich in-Flow-Pseudo-Elemente.
Vererbbar	Nein.
Animierbar	Ja. Elemente sind animierbar.
Version	CSS3
DOM-Syntax	object.style.flexShrink = "4";

Syntax

Syntax der CSS flex-shrink-Eigenschaft

css

flex-shrink: number | initial | inherit;

Beispiel zur flex-shrink-Eigenschaft:

Beispiel der CSS flex-shrink-Eigenschaft mit Zahlenwert

html

<!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>

Try it Yourself »

Ergebnis

CSS flex-shrink-Eigenschaft

Werte

Wert	Beschreibung	Ausführen
number	Legt fest, um wie viel sich das Element im Verhältnis zu den anderen flexiblen Elementen desselben Containers verkleinert. Standardwert ist 1.	Ausführen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausführen »
inherit	Erbt diese Eigenschaft von ihrem übergeordneten Element.

Practice

Welche Funktion hat die 'flex-shrink'-Eigenschaft in CSS?

Sie definiert die Fähigkeit eines Flex-Elements, bei Bedarf zu wachsen.Sie legt die Ausrichtung zwischen den Zeilen innerhalb eines flexiblen Containers 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 es Ihnen, zu steuern, wie ein Flex-Container entlang der Querachse angeordnet wird.Sie bestimmt die Reihenfolge, in der die Flex-Elemente angezeigt und innerhalb des Flex-Containers angeordnet werden.

CSS flex-shrink-Eigenschaft ​

Syntax ​

Beispiel zur flex-shrink-Eigenschaft: ​

Ergebnis ​

Werte ​

Practice ​

CSS flex-shrink-Eigenschaft

Syntax

Beispiel zur flex-shrink-Eigenschaft:

Ergebnis

Werte

Practice