wake-up-neo.com

Flex Auto Margin funktioniert nicht in IE10 / 11

Ich habe ein komplexes Layout, bei dem ich mit flexbox verschiedene Elemente vertikal und horizontal zentriere.

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

Das funktioniert überall richtig, außer in 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

Auf dem Bildschirm werden zwei Elemente angezeigt, die linksbündig neben dem roten übergeordneten Element angeordnet sein sollten (dh beide sollten zentriert sein, aber auf das letzte Element wurde margin-right:auto; Angewendet, und es wird die gesamte Zeile ausgefüllt und gedrückt der andere Punkt und sich selbst auf der Seite) - das ist das richtige Verhalten. Außer in IE10/11, wo beide Elemente falsch zentriert sind, d. H. Das margin-right:auto; Des zweiten Elements wird ignoriert.

Gibt es IE/Flexbox-Experten, die so etwas schon einmal erlebt haben?

32
Michael

Dies scheint ein IE Bug zu sein.

Nach der flexbox Spezifikation:

8.1. An automatischen Rändern ausrichten

Vor dem Ausrichten über justify-content und align-self, jeder positive freie Speicherplatz wird auf die automatischen Ränder in dieser Dimension verteilt.

Hinweis: Wenn der freie Speicherplatz auf automatische Ränder verteilt wird, haben die Ausrichtungseigenschaften in dieser Dimension keine Auswirkung, da die Ränder den gesamten nach dem Biegen verbleibenden freien Speicherplatz gestohlen haben.

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

Wenn auf ein Element automatische Ränder angewendet werden, werden Keyword-Ausrichtungseigenschaften wie justify-content und align-self haben keine Auswirkung (da die automatischen Ränder den gesamten Platz beansprucht haben).

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

IE10 und IE11 scheinen nicht konform zu sein. Sie wenden nicht den in der Spezifikation definierten automatischen Rand an.

(Beachten Sie, dass IE10 auf einem vorherige Version der Spezifikation .) Basiert


Lösungen

Methode 1: Verwenden Sie nur automatische Ränder

Ob justify-content wird entfernt, automatische Ränder funktionieren in IE10/11 einwandfrei. Also benutze nicht justify-content. Verwenden Sie die automatischen Ränder bis zum Ende. ( Siehe Beispiele für die Ausrichtung mit automatischen Rändern ).

Methode 2: Verwenden Sie ein unsichtbares Spacer-Div

Erstelle ein drittes Div mit visibility: hidden und flex-grow:1. Dies wird sich natürlich verschieben #first-item und #second-item am linken Rand, ohne dass automatische Ränder erforderlich sind.

#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: pink;
}
#container > div {
  background: cornflowerblue;
  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>
58
Michael_B