i have complex layout center various elements vertically , horizontally flexbox.
the last element has margin-right:auto; applied push elements left (and negate centering them).
this works correctly everywhere except on ie10/11 , has been driving me crazy.
html/css sample:
#container { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-flow: row wrap; -webkit-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; } #second-item { margin-right: auto; } /* colors - not important */ #container { height: 200px; width: 100%; background: red; } #container > div { background: blue; padding: 10px; outline: 1px solid yellow; }<div id='container'> <div id='first-item'>first item</div> <div id='second-item'>second item</div> </div>http://codepen.io/anon/pen/nrwvbr
you'll see 2 items on screen should left-aligned on side of red parent (i.e. should both centered, last item has margin-right:auto; applied , filling entire line, pushing other item , on side) - correct behaviour. except in ie10/11 both items incorrectly centered i.e. second item's margin-right:auto; ignored.
any ie/flexbox experts out there have encountered before?
this appears ie bug.
according flexbox specification:
prior alignment via
justify-content,align-self, positive free space distributed auto margins in dimension.note: if free space distributed auto margins, alignment properties have no effect in dimension because margins have stolen free space left on after flexing.
in other words, auto margins take precedence on justify-content.
in fact, if element has auto margins applied, keyword alignment properties such justify-content , align-self have no effect (because auto margins have taken space).
your code works expected in chrome , firefox because browsers in compliance spec.
ie10 , ie11 appear not in compliance. not applying auto margin defined in spec.
(note ie10 built on previous version of spec.)
solutions
method #1: use auto margins only
if justify-content removed, auto margins work fine in ie10/11. don't use justify-content. use auto margins way through. (see examples of alignment auto margins).
method #2: use invisible spacer div
create third div visibility: hidden , flex-grow:1. naturally shift #first-item , #second-item left edge, no need auto margins.
#container { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; } #third-item { flex-grow: 1; visibility: hidden; } /* colors - not important */ #container { height: 200px; width: 100%; background: red; } #container > div { background: blue; padding: 10px; outline: 1px solid yellow; }<div id='container'> <div id='first-item'>first item</div> <div id='second-item'>second item</div> <div id='third-item'>third item</div> </div>