Flex box wrap not working Firefox

[jimboidaho]

I have page that I am using flex to wrap some div elements depending on the width of the browser. It is working fine on ID >= 10 and Chrome. Most of the flex stuff works on Firefox except for flex-flow:row wrap. Not sure what I am doing wrong?
This is the flex wrapper css

.topnav {
display: flex;
display: -moz-box;
display:-ms-flexbox;
display:-webkit-flex;
flex-flow: row wrap ;
flex-direction: row;
-moz-box-pack: center;
-webkit-flex-direction: row;
justify-content: center ;
-webkit-justify-content: center;
-moz-justify-content: center;
width: 100%;
margin:0px;
border: none;
}

Here is the inner box css
.block-wrapper{
/border: solid thin papayawhip;/
margin: 2px;
height:110px;
background-color: white;
border: solid thin black;
width: 240px;
justify-content: center;
-moz-justify-content: center;

}

I have use Firebug to inspect the styles and wrap is there but does nothing.

Thanks.

[SamA74]

Watch the ordering of your pre-fixes. The ones without the pre-fix should be last.Eg, display:flex and justify-content: center` should be the last in the list, otherwise they get overwritten by the pre-fixes.

[PaulOB]

As Sam said the ‘display: -moz-box;’ is the culprit and over-rides the ‘display:flex’. If you change the order around it should work in Firefox.

This is one of the problems with pre-fixes in that you can get discrepancies between earlier versions of the rule if you are not careful. I think you can drop the moz-box anyway as that is Firefox 19 and a few years old now.

[aarti3542]

yes you can try this over-rides the ‘display:flex’

[jimboidaho]

That fixed it, thanks everyone. Amazing how much time can be wasted on a simple problem like that.