Flex-wrap polyfill per Firefox

Question

Secondo Mozilla's own documentation:

Firefox supporta solo FlexBox a riga singola.

Tuttavia vorrei iniziare a utilizzare flexboxes dal momento che è mostly supported by all modern browsers ora (Non ho bisogno di indirizzare IE 9 per questo progetto per fortuna).

Poiché Firefox supporta solo Flexbox a linea singola, l'unico vantaggio derivante dall'utilizzo è justify-content e possibilmente align-items. A mio parere, la vera potenza di Flexboxes è flex-flow e flex-wrap, che consente layout reattivi.

In realtà, ho provato a copiare lo Holy Grail Layout example dalla documentazione di Mozilla e ad aprirlo in Firefox e non funzionava nemmeno lì. Il numero order è stato modificato ma mostrava ancora i tre elementi in una riga invece di modificare lo flex-flow.

questione connessa: Flexbox not wrapping flex items

sono abbastanza sicuro che la maggior parte del mio target di riferimento è in Internet Explorer, Firefox e Safari per iOS. C'è un polyfill che posso usare per Firefox per ottenere il comportamento desiderato o devo ricorrere alle correzioni float s, width e clear usando Modernizr (e se sì, cosa cerco anche in Modernizr?)

Answer 1

No polyfill più necessario: flex-wrap: wrap per Firefox 28 e fino è fisso, si veda anche la mia risposta here.

Fix per browser meno recenti: Per i "solved by flexbox" demos Philip Walton utilizza un semplice polyfill CSS: @supports not (flex-wrap: wrap) si rivolge solo i browser senza supporto per flex-wrap: wrap, e per quanto ho capito: display: inline-block è usato al posto.

Answer 2

Questa funzione non è ancora pronta su Firefox, come già sapete. Non ho ancora trovato alcun polyfill per il flex-wrap. Ma conosco il problema di miglioramento preciso per l'implementazione di flex-wrap di Firefox.

prega, chi vuole questa funzione dovrebbe votare sul link qui sotto con l'aggiunta di soli alla lista CC:

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

Answer 3

È possibile utilizzare al posto di flex-direction:column;flex-flow:column;. Sembra essere un errore nella Mozillas Santo Graal https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example