CSS-Eigenschaft flex-wrap

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.