Gunnar Bittersmann: Pseudoelement als Flexitem in IE

.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 🖖

--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

akzeptierte Antworten

  1. @@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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. 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

      --
      sumpsi - posui - clusi
      1. 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

        --
        Pantoffeltierchen haben keine Hobbys.
      2. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    2. @@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 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann