Zum Inhalt

Zeilenumbruch mit Flex erzeugen

Ziegelsteine bemalt
Photo by Patrick Tomasso on Unsplash

Wenn es darum geht Elemente anzuordnen ist Flex-box ein sehr mächtiges Werkzeug. Leider gibt es aber keine Möglichkeit zu bestimmen, welches Element das Letzte in einer Zeile sein soll.

Das Problem

Im folgendem CodePen sind 2 50%, 4 33% und 2 50% breite Elemente. Das Ziel ist es nach dem letzten 33% breiten Element einen Zeilenumbruch zu erzeugen.

See the Pen
BajPBRw
by wesselbaum (@wesselbaum)
on CodePen.

Die Lösung

Um einen Zeilenumbruch zu erzwingen wird ein 100% breites und 0px hohes Element mit der Klasse break hinter das letzte 33% Element eingefügt.

See the Pen
LYGBPZY
by wesselbaum (@wesselbaum)
on CodePen.

3 Kommentare zu “Zeilenumbruch mit Flex erzeugen

  1. Michel sagt:

    .item-33 + .item-50::before wäre auch noch eine Möglichkeit oder irre ich mich?

      1. Michel sagt:

        Ne, war quatsch. I don’t know my job.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.