CSS-Eigenschaft flex-wrap

Die Eigenschaft flex-wrap definiert, ob die flexiblen Elemente umgebrochen werden sollen oder nicht. Mit anderen Worten, es definiert, ob die Elemente in einer einzigen Zeile platziert werden oder ob sie auf mehreren Zeilen platziert werden können.

Wenn es keine flexiblen Elemente gibt, hat die Eigenschaft flex-wrap keinen Effekt.

Anfangswert nowrap
Gilt für Flex-Containers
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.flexWrap = "wrap-reverse";

Syntax

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .example {
      width: 200px;
      height: 200px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; 
      -webkit-flex-wrap: nowrap; 
      display: flex;
      flex-wrap: nowrap;
      }
      .example div {
      width: 50px;
      height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft flex-wrap</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

In diesem Beispiel werden flexible Elemente in umgekehrter Reihenfolge umgebrochen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .example {
      width: 200px;
      height: 200px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex; 
      -webkit-flex-wrap: wrap-reverse; 
      display: flex;
      flex-wrap: wrap-reverse;
      }
      .example div {
      width: 50px;
      height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft flex-wrap</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #ccc;">C</div>
      <div style="background-color: #666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
nowrap Der Wert definiert, dass flexible Elemente nicht umgebrochen werden. Das ist der Standardwert dieser Eigenschaft.
wrap Der Wert definiert, dass flexible Elemente umgebrochen werden sollen.
wrap-reverse Der Wert definiert, dass flexible Elemente in umgekehrter Reihenfolge umgebrochen werden, falls nötig.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem ü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 bestimmt die CSS-Eigenschaft 'flex-wrap'?
Finden Sie das nützlich?