CSS-Eigenschaft flex-grow

Die Eigenschaft flex-grow gibt an, wie stark ein Element im Vergleich zu den anderen Elementen des Flex-Containers wachsen wird. Wenn alle Elemente des Containers durch flex-grow definiert sind, teilen sich alle Elemente den verfügbaren Platz.

Die Eigenschaft flex-grow wird mit den Eigenschaften flex-shrink und flex-basis verwendet.

Wenn es keine flexiblen Elemente gibt, hat die Eigenschaft flex-grow keine Wirkung.
Anfangswert 0
Gilt für Flex-Items, einschließlich In-Flow-Pseudo-Elemente
Geerbt Nein
Animierbar Ja, die Items sind animierbar.
Version CSS3
DOM Syntax object.style.flexGrow = "3";

Syntax

flex-grow: number | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 2px solid #ccc;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 2;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .box div:nth-of-type(1) {flex-grow: 1;}
      .box div:nth-of-type(2) {flex-grow: 2;}
      .box div:nth-of-type(3) {flex-grow: 1;}
      .box div:nth-of-type(4) {flex-grow: 1;}
      .box div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft flex-grow</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>

Im folgenden Beispiel wächst das blaue Element um 6px.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 2px solid #ccc;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      /* Safari 6.1+ */
      .box div:nth-of-type(1) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(2) {-webkit-flex-grow: 6;}
      .box div:nth-of-type(3) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(4) {-webkit-flex-grow: 1;}
      .box div:nth-of-type(5) {-webkit-flex-grow: 1;}
      /* Standard syntax */
      .box div:nth-of-type(1) {flex-grow: 1;}
      .box div:nth-of-type(2) {flex-grow: 6;}
      .box div:nth-of-type(3) {flex-grow: 1;}
      .box div:nth-of-type(4) {flex-grow: 1;}
      .box div:nth-of-type(5) {flex-grow: 1;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft flex-grow</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 Gibt an, wie stark das Element im Vergleich zu den anderen flexiblen Elementen desselben Containers wachsen wird. Der Standardwert ist 0.
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 bewirkt die CSS-Eigenschaft 'flex-grow'?
Finden Sie das nützlich?