Flex-wrap-Polyfill für Firefox

8

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?)

    
rink.attendant.6 16.07.2013, 19:42
quelle

3 Antworten

13

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.

    
Frank Lämmer 22.12.2013, 11:28
quelle
0

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)

    
Irae Carvalho 04.08.2013 16:28
quelle
-1

Sie können flex-direction:column; anstelle von flex-flow:column; verwenden. Es scheint ein Fehler in Mozillas Heiliger Gral Ссылка

zu sein     
Andreas 22.11.2013 00:47
quelle