Grow your CSS skills. Land your dream job.

Flexbox doesn’t center with auto margin in Firefox

  • # April 8, 2013 at 9:29 am

    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).

    # April 8, 2013 at 9:47 am

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

    # April 8, 2013 at 10:52 am

    `box-align:center`?

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

    # April 8, 2013 at 2:41 pm

    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.

    # April 9, 2013 at 7:06 pm

    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)

    # April 10, 2013 at 3:15 am

    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 :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".