Flex-wrap polyfill für Firefox

Question

Nach Mozilla's own documentation:

Firefox unterstützt nur einzeilig Flexbox.

Allerdings Ich mag würde mit flexboxes starten, da es mostly supported by all modern browsers jetzt ist (ich brauche nicht zum Glück für dieses Projekt IE 9 zum Ziel).

Da Firefox nur Single-Line-Flexbox unterstützt, ist der einzige Vorteil, den ich davon habe, justify-content und möglicherweise align-items. Meiner Meinung nach ist die wahre Stärke von Flexboxes flex-flow und flex-wrap, was reaktionsschnelle Layouts ermöglicht.

Eigentlich habe ich versucht, die Holy Grail Layout example aus der Mozilla-Dokumentation zu kopieren und es in Firefox zu öffnen, und es funktionierte nicht einmal richtig dort. Die order wurde geändert, aber es zeigte immer noch die drei Elemente in einer Zeile, anstatt die flex-flow zu ändern.

Verwandte Frage: Flexbox not wrapping flex items

Ich bin ziemlich sicher, dass die meisten meiner Zielgruppe ist auf Internet Explorer, Firefox und Safari für iOS. Gibt es eine Polyfill, die ich für Firefox verwenden kann, um das gewünschte Verhalten zu erreichen oder muss ich auf float s, width s und clear Fixes mit Hilfe von Modernizr (und wenn ja, was suche ich in Modernizr sogar?)

Answer 1

Keine polyfill mehr benötigt: flex-wrap: wrap für Firefox 28 und nach oben festgelegt ist, sehen Sie bitte meine Antwort auch here.

Fix für älteren Browser: Für die „solved by flexbox“ demo Philip Walton eine einfache CSS polyfill verwendet: @supports not (flex-wrap: wrap) nur Targeting-Browser ohne Unterstützung für flex-wrap: wrap, und soweit ich es verstehe: display: inline-block verwendet wird, statt.

Answer 2

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 jemand diese Funktion möchte, sollte auf dem Link unten stimmt selbst in der CC-Liste hinzufügen:

Firefox - Support multi-line flexbox (flex-wrap, align-content properties)

Answer 3

Sie flex-direction:column; statt flex-flow:column; verwenden kannst. Scheint ein Fehler in Mozillas Heiligen Gral zu sein https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example