CSS-Eigenschaft flex-shrink

Die Eigenschaft flex-shrink gibt an, wie stark ein Teil im Vergleich zu den anderen Teilen des Flex-Containers verkleinert wird. Wenn die Elemente größer sind als der Container, werden die Elemente verkleinert, um an den flex Container anzupassen. Wenn die Eigenschaft flex-shrink nicht in der Shorthand-Deklaration flex enthalten ist, wird der Wert voreingestellt auf 1 gesetzt. Wenn es keine flexiblen Elemente gibt, hat die Eigenschaft flex-shrink keine Wirkung.

Der Faktor flex-shrink wird bei negativer Raumverteilung mit der Flex-Basis multipliziert.
Anfangswert 1
Gilt für Flex-Elemente, einschließlich In-Flow-Pseudoelemente
Geerbt Nein
Animierbar Ja, die Elemente sind animierbar.
Version CSS3
DOM Syntax object.style.flexShrink = "4";

Syntax

flex-shrink: number | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px dotted #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 1; /* Safari 6.1+ */
      -webkit-flex-shrink: 3; /* Safari 6.1+ */
      -webkit-flex-basis: 100px; /* Safari 6.1+ */
      flex-grow: 1;
      flex-shrink: 3;
      flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-shrink: 7; /* Safari 6.1+ */
      flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft flex-shrink</h2>
    <div class="box">
      <div style="background-color: #eee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color :#ccc;"></div>
      <div style="background-color: #666;"></div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
number Der Wert gibt an, wie stark das Element im Vergleich zu den anderen flexiblen Elementen desselben Containers verkleinert wird. Der Standardwert ist 1.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+

Übe dein Wissen

Was ist die CSS-Eigenschaft 'flex-shrink' und wie funktioniert sie?
Finden Sie das nützlich?