Flexbox

[Gunnar Bittersmann]

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.

Nachträglich lese ich die Höhe der Flexitems mit JavaScript aus. Funktioniert bestens in Firefox; mittelprächtig in Blink (Chrome); gar nicht in WebKit (Safari) – ich krieg falsche Werte.

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

LLAP 🖖

[ottogal]

Sorry, kann nicht helfen. Aber: Irgendwie beruhigend, dass du mal was nicht weißt... ;-)

[Gunnar Bittersmann]

@@ottogal

Aber: Irgendwie beruhigend, dass du mal was nicht weißt... ;-)

Och, das kommt doch ständig vor: in vielen Threads, aus denen ich mich raushalte.

LLAP 🖖

[Der Martin]

Hallo Gunnar,

Aber: Irgendwie beruhigend, dass du mal was nicht weißt... ;-)

Och, das kommt doch ständig vor: in vielen Threads, aus denen ich mich raushalte.

das nenn ich mal eine gute Strategie. Denn viele Leute haben keine Ahnung, meinen aber trotzdem, andauernd ihren Senf dazu geben zu müssen.

So long,
 Martin

[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

[Gunnar Bittersmann]

@@Christian Kruse

Da könntest du ein Pseudo-Element setzen

Ah ja, das könnte ich.

body > div::after {
	order:-1;

Ich hab ::before genommen, dann spare ich das order: -1 dafür. ;-)

Anfänglich margin-bottom: 100% für dieses Pseudoelement – funzt.

	flex:0 100%;

Aber das ist schöner. Danke.

LLAP 🖖

[Gunnar Bittersmann]

@@Christian Kruse

(kein CodePen weil es mich nichts speichern lassen will ohne Registrierung)

Hab ich dann mal gemacht.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nachträglich lese ich die Höhe der Flexitems mit JavaScript aus. Funktioniert bestens in Firefox; mittelprächtig in Blink (Chrome); gar nicht in WebKit (Safari) – ich krieg falsche Werte.

BTW, ich hab keinen Schimmer, warum. Im Codepen kommt die richtige Höhe raus.

In der Anwendung, wo ich das einsetze, kommt im Blink ein etwas zu niedriger Wert (lässt sich durch Addition einer magic number zurechtfrickeln), im Safari jedoch unabhängig vom Inhalt ein konstanter Wert (28, IIRC).

LLAP 🖖

[mark]

@@Gunnar Bittersmann

Nachträglich lese ich die Höhe der Flexitems mit JavaScript aus. Funktioniert bestens in Firefox; mittelprächtig in Blink (Chrome); gar nicht in WebKit (Safari) – ich krieg falsche Werte.

BTW, ich hab keinen Schimmer, warum. Im Codepen kommt die richtige Höhe raus.

versuch mal die höhe nach window load abzufragen. dann sollte es klappen.

hatte vor kurzem das selbe problem, und es sieht so aus, als würde chrome doc ready feuern, wenn das css noch nicht gerendert ist. den richtigen wert habe ich bei meinen versuchen auch schon erhalten, wenn ich die abfrage mit settimeout um 0ms (bis zum nächsten cycle) verzögert habe.