Flex auto margin funktioniert nicht in IE10/11

Question

Ich habe ein komplexes Layout, wo ich verschiedene Elemente vertikal und horizontal mit flexbox zentrieren.

Das letzte Element hat dann margin-right:auto; angewendet, um die Elemente nach links zu schieben (und die Zentrierung zu negieren).

Das funktioniert überall außer IE10/11 und hat mich verrückt gemacht.

HTML/CSS Beispiel:

#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; 
 
} 
 

 
/* just some 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

Sie werden zwei Elemente auf dem Bildschirm sehen, die auf der Seite des roten linksbündig werden soll Elternteil (dh sie sollten beide zentriert sein, aber das letzte Element hat margin-right:auto; angewendet und füllt die gesamte Zeile, drückt das andere Element und i selbst auf der Seite) - das ist das richtige Verhalten. Außer in IE10/11, wo beide Elemente falsch zentriert sind, d. H. Die margin-right:auto; des zweiten Elements wird ignoriert.

Irgendwelche IE/flexbox-Experten da draußen, die schon einmal so etwas erlebt haben?

Answer 1

Dies scheint ein IE-Fehler zu sein.

Gemäß der FlexBox Spezifikation:

8.1. Aligning with auto margins

Vor der Ausrichtung über justify-contentalign-self und jeder positiven Freiraum ist in dieser Dimension zu auto Rand verteilt ist.

Hinweis: Wenn der freie Speicherbereich auf automatische Ränder verteilt ist, haben die Ausrichtungseigenschaften in dieser Dimension keine Auswirkungen, da die Ränder den freien Platz nach dem Biegen verloren haben.

Mit anderen Worten, automatische Ränder haben Vorrang vor .

In der Tat, wenn ein Element automatische Ränder angewendet hat, dann haben Schlüsselwortausrichtung Eigenschaften wie justify-content und align-self keine Wirkung (weil die automatischen Ränder den ganzen Raum genommen haben).

Ihr Code funktioniert in Chrome und Firefox erwartungsgemäß, da diese Browser den Spezifikationen entsprechen.

IE10 und IE11 scheinen nicht in Übereinstimmung zu sein. Sie wenden die automatische Marge nicht an, wie in der Spezifikation definiert.

(Beachten Sie, dass IE10 auf einem previous version of the spec aufgebaut ist.nur

Wenn justify-content entfernt, Autopannen funktionieren in IE10/11 Verwenden von Autopannen:)

---

Lösungen

Methode # 1. Also nicht verwenden. Verwenden Sie die automatischen Ränder bis zum Ende. (See examples of alignment with auto margins).

Methode 2: Verwenden Sie ein unsichtbares Spacer div

ein drittes div erstellen mit visibility: hidden und flex-grow:1. Dies verschiebt natürlich #first-item und #second-item an den linken Rand, ohne automatische Ränder zu benötigen.

#container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
} 
 
#third-item { 
 
    flex-grow: 1; 
 
    visibility: hidden; 
 
} 
 
/* just some 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>