1

According to this article, the display:flex property should work without any prefix in firefox 21. But, even if I use -moz- before the value, it is not being recognized by the HTML parser.

I tried uninstalling firefox 20 and reinstalling firefox 21 recently hoping it would work, but it doesn't.

When using the web developer tools, I can see the following warnings and errors:

[10:23:04.673] The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. @ `http://localhost/index.php`
[10:23:04.712] Error in parsing value for 'display'.  Declaration dropped. @ `http://localhost/index.css:6`

[10:23:04.712] Error in parsing value for 'display'.  Declaration dropped. @ `http://localhost/index.css:7`

[10:23:04.712] Unknown property 'flex-flow'.  Declaration dropped. @ `http://localhost/index.css:8`

[10:23:04.712] Error in parsing value for 'display'.  Declaration dropped. @ `http://localhost/index.css:16`

[10:23:04.712] Error in parsing value for 'display'.  Declaration dropped. @ `http://localhost/index.css:17`

[10:23:04.712] Error in parsing value for 'display'.  Declaration dropped. @ `http://localhost/index.css:22`

[10:23:04.712] Unknown property 'justify-content'.  Declaration dropped. @ `http://localhost/index.css:41`

[10:23:04.712] Unknown property 'flex'.  Declaration dropped. @ `http://localhost/index.css:109`

Those are not all the errors but some. Can anyone point out what the problem is?

Thanks in advance!

randmin
  • 818
  • 8
  • 16
Kevin
  • 6,539
  • 5
  • 44
  • 54

1 Answers1

5

display: flex is currently only supported behind a runtime flag in Firefox.

To enable it, enter about:config in the url field, search for flexbox, and set it to true.

It is enabled by default in Firefox Nightly, as it is a non-stable version.

It is due to be enabled by default in Firefox 22, providing the feature is ready to ship.

David Storey
  • 29,166
  • 6
  • 50
  • 60
  • That works partially, but still the layout is messed up.Still the following error is shown a 20 times : `[14:13:48.685] Error in parsing value for 'display'. Declaration dropped. @ http://localhost/index.css:16` Is there something else that I should enable too? – Kevin May 31 '13 at 08:46
  • it is impossible to know without you linking to your page, or creating a demo. – David Storey May 31 '13 at 08:48
  • 1
    The Firefox standard implementation does not currently support `flex-wrap: wrap`, that's part of the reason it is still hidden behind a hidden experimental flag. You won't be able to fall back on their 2009 implementation, either, because it doesn't support `box-lines: multiple`. In short, no wrapping for flex elements in Firefox (for now). – cimmanon May 31 '13 at 15:23