Css3 flexbox compatibility issues with Firefox and Safari

Question

I am trying to sort the flexbox layout, so it is compatible with the latest versions of IE / Firefox / Safari, and I have problems with Firefox / Safari.

Suggested layout:

----------------- header ----------------- | | | nav | section | | | | 

In Firefox and Safari, <section> is under nav

CSS

 body { width:50%; height:100%; display: -ms-flexbox; -ms-box-orient: horizontal; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flexbox; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } header { padding-top:100px; -webkit-flex: 1 100%; -moz-flex: 1 100%; -ms-flex: 1 100%; flex: 1 100%; } nav { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; width:10%; height:100%; } section { -webkit-flex: 4; -moz-flex: 4; -ms-flex: 4; flex: 4; width:40%; height:100%; } 

Answer 1

First of all, it is:

 body { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flexbox; } 

Must be:

 body { display: -ms-flexbox; display: -webkit-flex; } @supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */ body { display: flex; } } 

This does not mean anything, because IE does not have the implementation of the 2009 Flexbox project:

 body { -ms-box-orient: horizontal; } 

You also added the moz prefix to the properties from the standard Flexbox draft, but Firefox implemented these prefixes for free (only 2009 properties must have the moz prefix).

Even if you fix all these things, it still won’t work in Safari or Firefox. Why?

• Until iOS7 comes out, Safari is only implementing the 2009 Flexbox project. It does not implement box-lines: multiple , which allows you to wrap it in this draft
• Firefox implements the implementation of the project and the standard draft of 2009, but none of them supports packaging.