Flex-wrap polyfill dla Firefoksa

Question

Według Mozilla's own documentation:

Firefox obsługuje tylko pojedynczej linii schematu flexbox.

Chciałbym jednak rozpocząć korzystanie z flexbox, ponieważ obecnie jest to mostly supported by all modern browsers (nie muszę celować na IE 9 w tym projekcie na szczęście).

Ponieważ Firefox obsługuje tylko urządzenia Flexbox z pojedynczą linią, jedyną korzyścią, z której skorzystam, jest justify-content i prawdopodobnie align-items. Moim zdaniem, prawdziwa moc flexboxów to flex-flow i flex-wrap, co pozwala na elastyczne układy.

Właściwie próbowałem skopiować Holy Grail Layout example z dokumentacji Mozilli i otworzyć ją w Firefoksie, a nawet nie działała prawidłowo. Zmieniono order, ale nadal pokazywałem trzy elementy w jednym rzędzie zamiast zmieniać flex-flow.

Powiązane pytanie: Flexbox not wrapping flex items

Jestem pewien, że większość mojej grupy docelowej jest Internet Explorer, Firefox i Safari dla iOS. Czy istnieje polyfill, którego mogę używać w Firefoksie, aby uzyskać pożądane zachowanie, czy muszę zrezygnować z poprawek przy użyciu Modernizr (jeśli tak, czego szukam w Modernizr?)

Answer 1

polyfill Nie potrzeba już więcej: flex-wrap: wrap dla Firefoksa 28 i jest ustalona w górę, zobacz także moją odpowiedź here.

Fix dla starszych przeglądarek: Dla „solved by flexbox” demos Philip Walton wykorzystuje prosty CSS PolyFill: @supports not (flex-wrap: wrap) jest kierowana tylko przeglądarek bez wsparcia dla flex-wrap: wrap, io ile rozumiem go: display: inline-block jest używany zamiast.

Answer 2

Ta funkcja nie jest jeszcze gotowa na Firefoksie, jak już wiesz. Nie znalazłem jeszcze żadnej polyfill do flex-wrap. Ale znam dokładny problem rozszerzenia implementacji Flex-wrap Firefoksa.

proszę, ktoś chce z tej funkcji, należy głosować na poniższy link, dodając się do listy CC:

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

Answer 3

Można użyć flex-direction:column; zamiast flex-flow:column;. Wydaje się to być błąd w Mozillas Świętego Graala https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example