Flexbox

[Christian Kruse]

Hallo Gunnar,

Ich hätte gern, dass das erste Flexitems allein in seiner Spalte steht, ohne jedoch die volle Höhe zu haben. Hab ihm deshalb margin-bottom: 100% verpasst.

Bekomme ich das Layout auch anders als mit margin-bottom: 100% hin?

Da könntest du ein Pseudo-Element setzen (kein CodePen weil es mich nichts speichern lassen will ohne Registrierung):

#no1
{
	background-color: hsl(0, 100%, 40%);
	flex-basis: 6em;
	order:-1;
}

body > div::after {
	order:-1;
	flex:0 100%;
	content:"";
}

Damit kann man aber halt nur maximal zwei Breaks erzwingen. Und schön ist anders; leider ist die vorgesehene Lösung (break-after/break-before bzw page-braek-after/page-break-before) noch nicht besonders verbreitet, IIRC kann das nur der Firefox.

LG,
CK

Edit: Debug-Foo entfernt