W3docs
de
Anmelden

CSS flex-wrap Eigenschaft

Die CSS-Eigenschaft flex-wrap legt fest, ob Elemente umbrechen sollen oder nicht. Sehen Sie Beispiele mit verschiedenen Werten.

Die Eigenschaft flex-wrap steuert, ob die Elemente in einem Flex-Container auf eine einzige Zeile gezwungen werden oder auf mehrere Zeilen umbrechen dürfen. Standardmäßig versucht ein Flex-Container, alle seine Elemente in einer Zeile unterzubringen, auch wenn das bedeutet, dass sie verkleinert werden oder überlaufen. Durch Setzen von flex-wrap: wrap wird den Elementen erlaubt, bei zu wenig Platz in neue Zeilen zu fließen.

Diese Eigenschaft wird immer dann eingesetzt, wenn eine Reihe von Karten, Tags oder Navigationslinks auf schmalen Bildschirmen elegant umfließen soll, anstatt zu überlaufen oder zusammengedrückt zu werden.

flex-wrap wirkt sich nur auf Elemente aus, die Flex-Items sind. Die Eigenschaft hat daher keine Wirkung, wenn das übergeordnete Element nicht display: flex (oder display: inline-flex) hat. Wenn ein Flex-Container keine Elemente enthält, tut die Eigenschaft nichts.

Die Eigenschaft flex-wrap gehört zu den CSS3-Eigenschaften und wird eng mit flex-direction kombiniert: Gemeinsam werden sie häufig als flex-flow-Kurzschreibweise geschrieben.

Dieses Kapitel erklärt jeden flex-wrap-Wert, wie das Umbrechen mit der Hauptachse zusammenwirkt und worauf man achten sollte.

Anfangswertnowrap
Gilt fürFlex-Container.
VererbbarNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.flexWrap = "wrap-reverse";

Wie das Umbrechen funktioniert

Das Umbrechen erfolgt entlang der Querachse, senkrecht zur Hauptachse, die durch flex-direction festgelegt wird:

  • Bei der Standard-Einstellung flex-direction: row werden die Elemente von links nach rechts angeordnet. Wenn flex-wrap: wrap aktiviert ist und die Elemente keinen horizontalen Platz mehr haben, beginnt das nächste Element in einer neuen Zeile darunter.
  • Bei flex-direction: column werden die Elemente von oben nach unten gestapelt, und beim Umbrechen werden überschüssige Elemente in eine neue Spalte neben die erste verschoben.

Eine wichtige Konsequenz: Wenn flex-wrap auf nowrap (dem Standard) steht, schrumpfen Flex-Items, um in den Container zu passen (ihr flex-shrink greift), oder sie laufen über. Erst wenn Umbrechen erlaubt ist, behalten die Elemente ihre bevorzugte Größe und wechseln stattdessen in eine neue Zeile.

Wenn Elemente auf mehrere Zeilen umbrechen, wird der Abstand zwischen diesen Zeilen durch align-content gesteuert, während die Ausrichtung der Elemente innerhalb einer einzelnen Zeile durch align-items geregelt wird. Bei einer einzelnen, nicht umgebrochenen Zeile hat align-content keine Wirkung.

Syntax

Syntax der CSS-Eigenschaft flex-wrap

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

Beispiel der flex-wrap-Eigenschaft mit dem Wert "wrap":

Der Container unten ist 200px breit und enthält sechs 50px breite Boxen (300px Inhalt). Mit flex-wrap: wrap fallen die Boxen, die nicht in die erste Zeile passen, in eine zweite Zeile, anstatt zu schrumpfen:

Beispiel der CSS-Eigenschaft flex-wrap mit dem Wert wrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .wrap {
        width: 200px;
        height: 200px;
        border: 1px solid #cccccc;
        display: flex;
        flex-wrap: wrap;
      }
      .wrap div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>The flex-wrap Property</h2>
    <div class="wrap">
      <div style="background-color:coral;">A</div>
      <div style="background-color:lightblue;">B</div>
      <div style="background-color:khaki;">C</div>
      <div style="background-color:pink;">D</div>
      <div style="background-color:lightgrey;">E</div>
      <div style="background-color:lightgreen;">F</div>
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der flex-wrap-Eigenschaft mit dem Wert "nowrap":

Mit dem Standard-Wert nowrap werden dieselben sechs Boxen auf eine einzige Zeile gezwungen. Da sie nicht alle hineinpassen, werden sie schmaler als ihre angegebene Breite von 50px gedrückt:

Beispiel der CSS-Eigenschaft flex-wrap mit dem Wert nowrap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-wrap: nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-wrap property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS flex-wrap Eigenschaft

Beispiel der flex-wrap-Eigenschaft mit dem Wert "wrap-reverse":

wrap-reverse erlaubt es den Elementen ebenfalls, auf mehrere Zeilen umzubrechen, kehrt jedoch die Richtung der Querachse um: Die Zeilen stapeln sich nach oben statt nach unten, sodass die erste Zeile unten erscheint:

Beispiel der CSS-Eigenschaft flex-wrap mit dem Wert wrap-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-wrap property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
nowrapLegt fest, dass Flex-Items nicht umbrechen. Dies ist der Standardwert dieser Eigenschaft.Ausprobieren »
wrapLegt fest, dass Flex-Items bei Bedarf umbrechen.Ausprobieren »
wrap-reverseLegt fest, dass Flex-Items bei Bedarf in umgekehrter Reihenfolge umbrechen.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

flex-flow Kurzschreibweise

Da flex-wrap fast immer zusammen mit flex-direction gesetzt wird, bietet CSS die flex-flow-Kurzschreibweise für beide gleichzeitig:

/* flex-direction  flex-wrap */
flex-flow: row wrap;

Dies ist gleichwertig damit, flex-direction: row; und flex-wrap: wrap; getrennt zu schreiben.

Verwandte Eigenschaften

  • display — Setzt display: flex am übergeordneten Element, um den Flex-Container zu erstellen, auf den flex-wrap wirkt.
  • flex-direction — Legt die Hauptachse (Zeile oder Spalte) fest, um die das Umbrechen erfolgt.
  • align-content — Verteilt den Abstand zwischen umgebrochenen Zeilen (nur relevant, wenn Elemente umbrechen).
  • justify-content — Richtet Elemente entlang der Hauptachse aus.
  • flex — Steuert, wie einzelne Elemente wachsen und schrumpfen, um jede Zeile zu füllen.

Übungen

Übung
Was ist der Zweck der Eigenschaft 'flex-wrap' in CSS?
Was ist der Zweck der Eigenschaft 'flex-wrap' in CSS?
Was this page helpful?