Laut Mozillas eigener Dokumentation :
Firefox unterstützt nur Single-Line-Flexbox.
Ich würde jedoch gerne Flexboxen verwenden, da derzeit von allen modernen Browsern unterstützt wird (das muss ich nicht) Ziel IE 9 für dieses Projekt zum Glück).
Da Firefox nur Single-Line-Flexbox unterstützt, ist der einzige Vorteil, den ich daraus habe, justify-content
und möglicherweise align-items
. Meiner Meinung nach ist die wahre Stärke von Flexboxes flex-flow
und flex-wrap
, was reaktionsfähige Layouts ermöglicht.
Tatsächlich habe ich versucht, das Beispiel für das Layout des Heiligen Grals zu kopieren die Mozilla-Dokumentation und öffne sie in Firefox und es funktionierte dort nicht mal richtig. % Co_de% wurde geändert, aber es wurden immer noch die drei Elemente in einer Zeile angezeigt, anstatt die order
zu ändern.
Verwandte Frage: Flexbox wickelt keine Flex-Elemente
Ich bin mir ziemlich sicher, dass der Großteil meiner Zielgruppe auf Internet Explorer, Firefox und Safari für iOS basiert. Gibt es ein Polyfill, das ich für Firefox verwenden kann, um das gewünschte Verhalten zu erreichen, oder muss ich auf flex-flow
s, float
s und width
fixes mithilfe von Modernizr zurückgreifen (und wenn ja, wonach suche ich überhaupt?) in Modernizr?)
Kein Polyfill mehr erforderlich : flex-wrap: wrap
für Firefox 28 und höher ist behoben, bitte beachten Sie auch meine Antwort hier .
Fix für ältere Browser : Für die " gelöst von flexbox " Demos Philip Walton verwendet einen einfachen CSS-Polyfill: @supports not (flex-wrap: wrap)
richtet sich nur an Browser ohne Unterstützung für flex-wrap: wrap
und soweit ich es verstehe: display: inline-block
wird stattdessen verwendet.
Diese Funktion ist noch nicht für Firefox verfügbar, wie Sie bereits wissen. Ich habe noch kein Polyfill gefunden, um die Folie zu umwickeln. Aber ich kenne das genaue Verbesserungsproblem für Firefox Flex-Wrap-Implementierung.
Bitte, jeder, der diese Funktion möchte, sollte über den folgenden Link abstimmen, indem er sich der CC-Liste anfügt:
Firefox - Unterstützung von Multi-Line-Flexboxen (Flex-Wrap, Align-Content-Eigenschaften)
Tags und Links css css3 cross-browser firefox flexbox