css - Flexible box layout model: How should auto margins in the cross-axis direction behave? -
please me understand 1 issue flexible box layout model different results in firefox , chrome.
consider following html fragment:
<body> <header>header</header> <footer>footer</footer> </body> styled via
body { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } header { max-width: 400px; height: 20px; background-color: yellow; margin: 0 auto; } footer { width: 400px; height: 20px; background-color: green; margin: 0 auto; } the header box has maximum width constraint of 400px while footer has fixed width of 400px. when try code in gecko-based browsers (firefox 21 , 24 in case) both header , footer horizontally centered (as hoped giving them left , right auto margins) footer has width of 400px while header's width width of content if enough horizontal space available.
in webkit/blink-based browsers (chrome 25 , 28 in case) header , footers both centered , both 400px wide (in case there enough horizontal space), , want achieve.
obviously, either firefox or chrome must wrong. how understand spec: http://www.w3.org/tr/css3-flexbox/? desired behaviour?
if want play around, here jsfiddle: http://jsfiddle.net/4rv7k/.
note 1 has enable flexible box layout model in release version of firefox. setting layout.css.flexbox.enabled. (without it, 1 not testing flexboxes.)
p.s.: bug in chromium's engine , has apparently been fixed now: https://code.google.com/p/chromium/issues/detail?id=242654
the firefox/gecko behavior correct.
webkit stretching 400px (the max-width) due header element's default "align-self: stretch" value. however, spec clear "align-self: stretch" only supposed stretch if have no auto margins in cross axis. quoting spec:
if flex item has ‘align-self: stretch’, [...] , neither of cross-axis margins ‘auto’, used outer cross size used cross size of flex line, clamped according item's min , max cross size properties http://www.w3.org/tr/css3-flexbox/#cross-sizing
the exception "neither of cross-axis margins auto" firefox honoring here , webkit/blink appear ignoring.
now, achieve desired layout: looks want both stretchiness and centering, , don't think can both of things simultaneously in cross axis.
you can them simultaneously in main axis of flex container, though -- can fix adding horizontal flex container around header , footer.
i've done here: http://jsfiddle.net/4rv7k/16/
the relevant code (just 'header' simplicity):
body { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } horizflex { display: -webkit-flex; display: flex; } header { -webkit-flex: 1 0 auto; flex: 1 0 auto; max-width: 400px; height: 20px; background-color: yellow; margin: 0 auto; } [...] <body><horizflex><header>header</header></horizflex></body> i think achieves layout you're looking wrapping header , footer each in horizontal flex container. flex container stretches width of parent (the body), , inside of have single flex item (e.g. ), flexible max-width, , center (with auto margins) once has reached max-width.
Comments
Post a Comment