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.
.item-33 + .item-50::before wäre auch noch eine Möglichkeit oder irre ich mich?
Das habe ich versucht, hat aber nicht funktioniert. Habe ich etwas falsch verstanden?
https://codepen.io/wesselbaum/pen/JjGqzZO
Ne, war quatsch. I don’t know my job.