CSS-Eigenschaft flex

Die Eigenschaft flex definiert die Komponenten einer flexiblen Länge. Es ist eine Abkürzung für die Eigenschaften flex-grow, flex-shrink und flex-basis. Flex-shrink und flex-basis sind optional, d. h. man muss sie nicht in die Deklaration flex aufnehmen.

Die Eigenschaft flexist ein Teil des Moduls Flexible Box Layout module. Wenn es keine flexiblen Elemente gibt, hat die Eigenschaft flex keine Wirkung.

Wenn Sie die Eigenschaft flex-grow nicht in die Shorthand-Deklaration aufnehmen, wird der Wert standardmäßig auf 1 gesetzt. Wenn Sie die Eigenschaft flex-shrink nicht in die Shorthand-Deklaration aufnehmen, wird der Wert standardmäßig auf 1 gesetzt. Beachten Sie, dass der Faktor flex-shrink mit flex-basis multipliziert wird, wenn der negative Raum verteilt wird. Wenn die Eigenschaft flex-basis nicht berücksichtigt wird, wird ihr Wert auf 0% gesetzt.

"Auto" ist der Standardwert der Eigenschaft. Dieser Wert bestimmt die Größe des Elements aufgrund der Eigenschaften width/height. (Wenn die Hauptgrößeneigenschaft des Elements auf "auto" gesetzt wird, wird das Element flex anhand seines Inhalts bewertet.)

"Initial" dimensioniert das Element aufgrund seiner Eigenschaften width/height (oder seinem Inhalt, falls nicht gesetzt). Es macht flex unflexibel, wenn noch etwas freier Platz vorhanden ist, lässt es aber auf sein Minimum schrumpfen, wenn nicht genügend Platz vorhanden ist. Die Ausrichtungsmöglichkeiten oder automatischen Ränder können genutzt werden, um Flex-Items entlang der Hauptachse auszurichten.

"None" wird nach seinen Eigenschaften width und height bemessen. Sie ist völlig unflexibel.

Hinweis: Die Anfangswerte der Eigenschaften flex-grow und flex-shrink unterscheiden sich von ihren Standardwerten, wenn sie nicht in der Shorthand-Deklaration flex enthalten sind, um häufige Fälle besser berücksichtigen zu können.
Anfangswert 0 1 auto
Gilt für Flex-Items, eingeschlossen In-Flow-Pseudo-Elemente
Geerbt Nein
Animierbar Ja
Version CSS3
DOM Syntax Object.style.flex = "1";

Syntax

flex: flex-grow | flex-shrink | flex-basis | auto | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <title>Der Titel des Dokuments</title>
  <head>
    <style> 
      .box {
      width: 350px;
      height: 200px;
      padding-left: 0;
      list-style-type: none;	
      border: 1px dashed black;
      display: -webkit-flex;
      display: flex;
      }
      .box div {
      flex: 1;
      }
      .green {background-color: #8ebf42}
      .blue {background-color: #1c87c9;}
      .gray {background-color: #666}
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft flex</h2>
    <div class="box">
      <div class="green">GRÜN</div>
      <div class="blue">BLAU</div>
      <div class="gray">GRAU</div>
    </div>
  </body>
</html>

Ein Beispiel, wo eines der Elemente wächst.

Beispiel

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

Ein weiteres Beispiel mit flex-shrink und flex-shrink.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .box {
      width: 320px;
      height: 120px;
      border: 1px solid #666;
      display: -webkit-flex; /* Safari */
      display: flex;
      }
      .box div {
      -webkit-flex-grow: 1; /* Safari 6.1+ */
      -webkit-flex-shrink: 2; /* Safari 6.1+ */
      -webkit-flex-basis: 100px; /* Safari 6.1+ */
      flex-grow: 1;
      flex-shrink: 2;
      flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
      -webkit-flex-shrink: 5; /* Safari 6.1+ */
      flex-shrink: 5;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für 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
flex-grow Gibt an, wie stark das Objekt im Vergleich zu den anderen flexiblen Elementen desselben Containers wachsen wird.
flex-shrink Gibt an, wie stark das Element im Vergleich zu den anderen flexiblen Elementen desselben Containers verkleinert wird.
flex-basis Bezeichnet die Länge des Elements durch "auto", "inherit" oder eine Zahl gefolgt von "%", "px", "em" usw.
auto Äquivalent zu 1 1 auto.
initial Äquivalent zu 1 0 auto.
none Äquivalent zu 0 0 auto.
inherit Es erzeugt 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

Welche der folgenden sind Optionen, die für die 'flex' Eigenschaft in CSS verfügbar sind?
Finden Sie das nützlich?