CSS-Eigenschaft flex-grow

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.