Pseudoelement als Flexitem in IE

[Gunnar Bittersmann]

.flexbox
{
	display: flex;
}

.flexbox::before
{
	content: '';
	flex: 0 1 50%;
}

schiebt das nächste Flexitem in die Mitte. Nicht so im IE 11. 😞 Test

Kann man da was tun?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Kann man da was tun?

Ja, kann man. display: block o.ä. fürs Pseudoelement. Flexbug #12, wie mir zugezwitschert wurde. Nicht, dass ich das nicht versucht hätte …

Es war nur ein Zusammenkommen von zwei Dingen. In meinem Projekt hab ich nicht 50%, sondern calc(50% + 1em). IE scheint calc() für flex-basis auch nicht zu gefallen.

Lösung:

.flexbox::before
{
	content: '';
	display: block;
	flex: 0 1 50%;
	flex: 0 1 calc(50% + 1rem);
}

Dann sitzt das Zeugs im IE hat ein bisschen weiter links. Aber es sitzt.

Jetzt noch die Präfixe für IE 10 …

LLAP 🖖

[Rolf B]

Hallo Gunnar,

dumme Frage, weil ich den Gesamtzusammenhang nicht kenne: Spricht was dagegen, die Positionierung über padding-left zu lösen statt über ein Flex-Item? Käme mir jetzt nahe liegender vor.

Rolf

[Matthias Apsel]

Hallo Rolf B,

dumme Frage, weil ich den Gesamtzusammenhang nicht kenne: Spricht was dagegen, die Positionierung über padding-left zu lösen statt über ein Flex-Item? Käme mir jetzt nahe liegender vor.

Die mögliche Verteilung über mehrere Zeilen?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Rolf B

Spricht was dagegen, die Positionierung über padding-left zu lösen statt über ein Flex-Item?

Ja: responsive. Bei wenig Breite soll ja nicht 50% Platz verschwendet werden, sondern das Pseudoelement-Flex-Item soll schrumpfen.

Ansonsten müsste man umständlich mit media queries rumhantieren … – nö, keine Lust.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

… Flexbug #12 …

IE scheint calc() für flex-basis auch nicht zu gefallen.

Im Artikel nach calc gesucht: Flexbug #8. Lesen bildet!

Lösung nun:

.flexbox::before
{
	content: '';
	display: block;
	flex: 0 1 50%;
	flex-basis: calc(50% + 1rem);
}

Dann sitzt das Zeugs im IE hat ein bisschen weiter links. Aber es sitzt.

Im IE 11 jetzt auch da, wo’s soll.

LLAP 🖖