Flex automatique de la marge ne travaillant pas dans IE10/11

J'ai un complexe de mise en page où j'centre de divers éléments verticalement et horizontalement avec flexbox.

Le dernier élément a margin-right:auto; appliqués pour repousser les éléments de gauche (et réduire à néant les recentrer).

Cela fonctionne correctement partout, sauf sur IE10/11 et a été me rend fou.

HTML/CSS exemple:

CSS:

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

HTML:

<div id='container'>
  <div id='first-item'>first item</div>
  <div id='second-item'>second item</div>
</div>

http://codepen.io/anon/pen/NrWVbR

Vous verrez deux éléments sur l'écran qui doit être aligné à gauche, sur le côté de la rouge parent (c'est à dire qu'ils doivent à la fois être centré, mais le dernier élément a margin-right:auto; appliquée et le remplissage de l'ensemble de la ligne, poussant l'autre élément et sur le côté) - c'est le bon comportement. Sauf dans IE10/11 où les deux éléments sont mal centrées, c'est à dire le deuxième élément margin-right:auto; est ignoré.

Tout IE/flexbox experts qui ont rencontré quelque chose comme ça avant?

InformationsquelleAutor Michael | 2016-05-30
  1. 63

    Ce qui semble être un IE bug.

    Selon la flexbox spécifications:

    8.1. L'alignement automatique des marges

    Avant l'alignement via justify-content et align-self, tout résultat positif de l'espace libre est distribué à l'auto marges dans cette dimension.

    Remarque: Si l'espace libre est distribué à l'auto marges, les propriétés d'alignement n'aura aucun effet dans cette dimension, car les marges ont volé tout l'espace libre à gauche après la flexion.

    En d'autres termes, auto marges de prendre la priorité sur justify-content.

    En effet, si un élément a l'auto marges appliquées, ensuite mot-clé de l'alignement des propriétés telles que justify-content et align-self n'ont aucun effet (parce que l'auto marges ont pris tout l'espace).

    Votre code fonctionne comme prévu dans Chrome et Firefox, car ces navigateurs sont en conformité avec la spécification.

    IE10 et IE11 semble pas être en conformité. Ils ne sont pas l'application automatique de la marge tel que défini dans les spécifications.

    (Notez que IE10 est construit sur un la version précédente de la spec.)

    Solutions

    Méthode n ° 1: Utiliser l'auto marges seulement

    Si justify-content est supprimé, auto marges de bien fonctionner dans IE10/11.
    Afin de ne pas les utiliser justify-content. L'utilisation de l'auto de marges de tout le chemin à travers. (Voir les exemples de l'alignement automatique des marges).

    Méthode n ° 2: Utilisation d'un invisible entretoise div

    D'en créer une troisième div avec visibility: hidden et flex-grow:1. Cela va naturellement vers #first-item et #second-item sur le bord gauche, sans avoir besoin de auto de marges.

    CSS:

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

    HTML:

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

    • Pourquoi ne pas simplement supprimer l'auto marges et de garder justifier de contenu?
    • Pour moi, la Solution a été de passer à align-self: center; au lieu de margin: 0 auto; sur flex éléments enfants.
    • Comment se fait la visibility de "remplissage" #third-item est en cours de mise à hidden ?
    InformationsquelleAutor Michael_B