Flexbox doesn’t center with auto margin in Firefox

[CrocoDillon]

See: http://codepen.io/chriscoyier/pen/zlntC

If you use Firefox (tested on version 19) it doesn’t center if you add something like

width: 80%;
margin: 0 auto;

to `.page-wrap`. Does anyone have a solution to this, using CSS only (a centered wrapper would be too easy and too ugly).

[Kitty Giraudel]

Couldn’t find a solution for old syntax. Firefox 20+ is okay.

[Paulie_D]

`box-align:center`?

Old syntax but who knows…I’m on FF20 here at work?

[CrocoDillon]

No luck @Paulie_D. @HugoGiraudel, it’s idd the old syntax that’s the problem. Only supporting new syntax halves the browser support though. I was going to implement a float fallback (can’t replicate exactly what I’m after but can come close) for browsers that don’t support flexbox anyway (using Modernizr). I’ll just have to figure out if I want to give the old flexbox supporting browsers the float treatment too, or go with the extra wrapper.

Thanks to you both.

[dholbert]

If you actually want…

width: 80%;

margin: 0 auto;

…why not just use “margin :0 10%” for your centering? If you’re leaving exactly 20% of the containing-block width for use in margins, you can just assign 10% to either side and be done with it.

Here’s a fork of your codepen, with this added — it works for me in old version of Firefox: http://codepen.io/anon/pen/jLbeI

(See also https://bugzilla.mozilla.org/show_bug.cgi?id=701794 which covers the issue with auto margins and moz-box)

[CrocoDillon]

Oh yeah sorry, forgot to mention that for large screens I want the width fixed with `max-width: 75em`. Otherwise that’d be a very good point, thanks for commenting and for that link :)

[Author]

Posts