Gunther: Firefox und CSS Flexbox

Beitrag lesen

SELF-Forum

Firefox und CSS Flexbox

Gunther
– Informationen zu den Bewertungsregeln

Hallo Mathias,

okay, *jetzt* verstehe ich das Problem. ;) Das wurde aus deinem Ursprungsposting nicht so deutlich.

Ja, manchmal ist es sogar in Deutsch "schwierig", ein Problem verständlich zu formulieren ... ;-)

Und da 'width' nichts mit der Flexbox-Syntax zu tun hat, kann man im CSS nicht zwischen alter und neuer Variante unterscheiden. Ergo funktioniert bei mir also (bis jetzt zumindest) immer nur eine Version.

Solange alle Spalten gleich groß sind (abzüglich margins), ist das eigentlich relativ einfach, oder? Mein Vorschlag:

http://codepen.io/molily/pen/FkecC

Die margins habe ich hier einmal herausgelassen (werde ich noch sinnvoll nachtragen – ist noch mal ein Problem für sich).

Im übrigen gehören die "Hauptelemente" der Seite jeweils auch zu einer 'vertikalen' Flexbox.

Die 4 Boxen ansich sind auch nicht das eigentliche Problem.
Der letzte Punkt bereitet Probleme ...!

Mein Body Element ist ja ebenfalls ein (vertikaler) Flexbox Container.
Zur Veranschaulichung:

  
<body>  
  <header>...</header>  
  <nav>...</nav>  
  <main>...</main>  
  <footer>...</footer>  
</body>

Alle Blöcke sind "starr", bis auf Main, der bei Bedarf "gestreckt" werden soll.
Auch das "funktioniert" soweit in allen getesteten Browsern.

Nur wenn ich im Firefox die neue Flexbox Syntax (mit dem CSS Code aus meinem Beispiel) aktiviere, grenzt das Main Element zwar immer noch unmittelbar an das Footer Element, aber der Inhalt von Main (also u.a. meine 4 Boxen) "ragen" plötzlich über das Main Element hinaus (und liegen vor/ über dem Footer Element)!?

Ein Bug in der neuen Flexbox Syntax im Firefox?
Ich habe ehrlich gesagt keine Ahnung wieso FF dieses Verhalten zeigt.
Wie gesagt, sobald ich für die Boxen nur den Prozentwert für width verwende, ist alles OK. Nur "funktionieren" so halt die Boxen mit der alten Syntax nicht ...! :-(

Frage ich mich, warum die das nicht im Modernizr Skript machen!? Die testen auf 'flexWrap', um zwischen alt und neu zu unterscheiden. Und da der Firefox wrap auch in der neuen Version nicht beherrscht, kommt als Ergebnis immer 'no-flexbox flexboxlegacy' heraus.

Naja, Modernizr will halt die komplette Unterstützung prüfen, insofern ist das Ergebnis korrekt.

Für die Praxis macht es mehr Sinn, zwischen grundlegender Unterstützung (display: flex usw.) und flex-wrap zu unterscheiden.

Vielleicht interessiert dich dann auch
https://github.com/Modernizr/Modernizr/issues/934
https://github.com/Modernizr/Modernizr/issues/812

Gruß Gunther

Beitrag melden
–
Informationen zu den Bewertungsregeln