Elemente in Flexbox an bestimmten Punkten umbrechen

Im Flexbox-Layout ermöglicht die Flex-Wrap-Eigenschaft, dass Elemente in die nächste Zeile umgebrochen werden, wenn die Behälterbreite wird überschritten. Allerdings gibt es derzeit keine Standardmethode, um anzugeben, welches Element den Umbruch auslösen soll.

Eine Problemumgehung, um den Umbruch nach einem bestimmten Element zu erzwingen, besteht darin, die Flex-Basis für dieses Element innerhalb einer Medienabfrage, die auf das abzielt, auf 100 % zu setzen spezifische Breite. Dadurch wird das Element gezwungen, die gesamte Breite seines übergeordneten Containers einzunehmen, wodurch die Zeile danach effektiv unterbrochen wird:

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

Zum Beispiel umschließt das folgende CSS die Listenelemente nach jeweils zwei Elementen:

ul {
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(2n) {
  flex-basis: 100%;
}

Diese Methode bietet eine flexible Möglichkeit, das Umbruchverhalten zu steuern, ohne dass zusätzliches Markup erforderlich ist. Es ist jedoch wichtig zu beachten, dass es auf Medienabfragen basiert, was in manchen Situationen zu Leistungseinbußen und Einschränkungen führen kann.