6.4.12 CSS Multiline Flexbox

Bisher wurde die Flexbox immer nur mit einer Zeile befüllt. Es ist jedoch auch möglich, die Elemente in einer Flexbox umbrechen zu lassen, sodass sich die Inhalte entlang der Haupt- und Querachse ausrichten. Dazu muss zunächst das Umbrechen mit der Eigenschaft flex-wrap: wrap aktiviert werden. Danach werden die Elemente, die über den Rand ragen würden, in eine neue Zeile umgebrochen. Mit der Eigenschaft align-content kann nun die Verteilung der Elemente entlang der Querachse gesteuert werden.

Umbrechen der Elemente mit flex-wrap

In einer Flexbox können die Elemente durch Aktivieren von flex-wrap: wrap in eine neue Zeile umgebrochen werden, wenn sie über den Rand hinausgehen. Zusätzlich kann mit der Eigenschaft align-content die Verteilung der Elemente entlang der Querachse gesteuert werden.

flex-wrap: wrap;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Verteilung über beide Achsen mit 'align-content: space-between'

Sourcecode zum Beispiel
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Beispiele justify- und align-content</title>
  <style>
    p {
      text-align: center;
      margin: 14px 0 4px 0;
    }
    .flex-container {
      margin: auto;
      margin-top: 0;
      width: 400px;
      height: 400px;
      border: 1px solid gray;
      background-color: lightgray;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
    }
    /* Innere Element zur besseren Darstellung stylen */
    .flex-container>div {
      border: 1px solid darkblue;
      background-color: lightblue;
      text-align: center;
      min-width: 110px;
      min-height: 110px;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
    <div>H</div>
    <div>i</div>
  </div>
</body>
</html>

Verwenden Sie das obere Beispiel und experimentieren Sie mit den Werten für die Ausrichtung in Richtung Haupt- und Querachse. Ändern Sie die Anzahl der Elemente in der Flexbox und ändern Sie das Verhalten des Umbrechens der Elemente. Versuchen Sie ein Verständnis der Möglichkeiten der Flexbox zu bekommen.

Flexbox nutzen

Was fällt Ihnen auf, wenn Sie die Möglichkeiten der Verteilung zwischen Haupt- und Querachse vergleichen?

Lösung

Die Verteilung der Hauptachse kann nicht mit dem Wert justifycontent: stretch gesetzt werden, so dass die Elemente ihre eigene Größe anpassen um die volle Breite der Hauptachse auszufüllen. Wie das funktioniert, sehen Sie im nächsten Absatz.


Elemente in der Flexbox wachsen lassen

In einem Flex-Container können Sie steuern, wie Flex-Elemente zusätzlichen verfügbaren Raum einnehmen, indem Sie die Eigenschaften flex-grow, flex-shrink und flex-basis verwenden.

  • flex-grow: Bestimmt, wie viel zusätzlicher Raum ein Flex-Element im Verhältnis zu anderen Flex-Elementen einnehmen soll, wenn verfügbarer Platz vorhanden ist. Ein Wert von 0 bedeutet, dass das Element nicht wächst; ein positiver Wert gibt das Wachstumsverhältnis an.

  • flex-basis: Legt die Ausgangsgröße des Flex-Elements fest, bevor der verfügbare Raum verteilt wird. Sie kann in absoluten Einheiten (z. B. px, em), Prozent oder als Schlüsselwort (auto, content) angegeben werden.

Tabelle: Auswirkungen des flex-basis-Werts

flex-basis-Wert Auswirkungen
0 Das Element hat initial keine Größe. Wenn alle Elemente flex-basis: 0 haben, wird der freie Raum gemäß flex-grow verteilt.
>0px | em | %
(z. B. 100px, 33%)
Das Element erhält die angegebene Ausgangsgröße.
auto Die Größe des Elements richtet sich nach seinem Inhalt oder der definierten width/height.
content Die Größe wird durch den inneren Inhalt bestimmt.

Hinweis: Die Kombination von flex-grow, flex-shrink und flex-basis kann mit der Kurzform flex angegeben werden, z. B. flex: 1 1 auto;.

1
2
3
.item {
  flex: 2 1 100px;
}

Beispiel: Flexbox mit flex-grow

Sourcecode zum Beispiel
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Beispiele zu flex-grow</title>
  <style>
    p {
      text-align: center;
      margin: 14px 0 4px 0;
    }
    .flex-container {
      margin: auto;
      margin-top: 0;
      width: 400px;
      height: 50px;
      border: 1px solid gray;
      background-color: lightgray;
      display: flex;
    }
    /* Innere Element zur besseren Darstellung stylen */
    .flex-container>div {
      border: 1px solid darkblue;
      background-color: lightblue;
      text-align: center;
      width: 100px;
    }
    .flex-container .fb-0 {
      flex-basis: 0;
    }
    .flex-container .fg-1 {
      flex-grow: 1;
    }
    .flex-container .fg-2 {
      flex-grow: 2;
    }
    .flex-container .fg-4 {
      flex-grow: 4;
    }
  </style>
</head>
<body>
  <p> 1) Ohne flex-grow </p>
  <div class="flex-container">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p> 2) Mit flex-grow für das zweite Element </p>
  <div class="flex-container">
    <div></div>
    <div class="fg-1">flex-grow: 1</div>
    <div></div>
  </div>
  <p> 3) Mit flex-grow </p>
  <div class="flex-container">
    <div class="fg-2">flex-grow: 2</div>
    <div class="fg-1">flex-grow: 1</div>
    <div class="fg-4">flex-grow: 4</div>
  </div>
  <p> 4) Mit flex-grow und flex-basis: 0 </p>
  <div class="flex-container fb-0">
    <div class="fg-2 fb-0">flex-grow: 2</div>
    <div class="fg-1 fb-0">flex-grow: 1</div>
    <div class="fg-4 fb-0">flex-grow: 4</div>
  </div>
</body>
</html>

Zusammenfassung

Flexbox bietet durch die Möglichkeit des Umbrechens und Wachsens eine flexible Grundlage für dynamische Layouts. Möglichkeiten, wie das Schrumpfen von Elementen gibt es auch. Weitere Informationen finden sich in den Mozilla MDN Web Docs.