web-dev-qa-db-fra.com

La marge automatique Flex ne fonctionne pas dans IE10 / 11

J'ai une disposition complexe où je centre divers éléments verticalement et horizontalement avec flexbox.

Le dernier élément a alors margin-right:auto; appliqué à Poussez les éléments à gauche (et annulez leur centrage).

Cela fonctionne correctement partout sauf sur IE10/11 et m'a rendu fou.

Exemple HTML/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;
}
<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 doivent être alignés à gauche sur le côté du parent rouge (c’est-à-dire qu’ils doivent tous les deux être centrés, mais le dernier élément a margin-right:auto; appliqué et remplit la ligne entière, en poussant l’autre article et lui-même sur le côté) - c’est le comportement correct. Sauf dans IE10/11, où les deux éléments sont mal centrés, c’est-à-dire le margin-right:auto; est ignoré.

Tous les experts IE/flexbox qui ont déjà rencontré ce genre de problème?

cssinternet-explorerflexboxinternet-explorer-11internet-explorer-10
32
Michael

Cela semble être un bogue IE.

Selon la spécification flexbox:

8.1. Alignement sur les marges automatiques

Avant l'alignement via justify-content et align-self, tout espace libre positif est distribué aux marges automatiques dans cette dimension.

Remarque: Si l'espace libre est distribué aux marges automatiques, les propriétés d'alignement n'auront aucun effet dans cette dimension, car les marges auront volé tout l'espace libre restant après la flexion.

En d'autres termes, les marges automatiques ont priorité sur justify-content.

En fait, si des marges automatiques sont appliquées à un élément, les propriétés d'alignement des mots clés telles que justify-content et align-self n'ont aucun effet (car les marges automatiques ont pris toute la place).

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

IE10 et IE11 ne semblent pas être en conformité. Ils n'appliquent pas la marge automatique définie dans la spécification.

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

Solutions

Méthode n ° 1: Utilisez uniquement les marges automatiques

Si justify-content est supprimé, les marges automatiques fonctionnent bien dans IE10/11. Alors n'utilisez pas justify-content. Utilisez des marges automatiques tout au long. ( Voir des exemples d'alignement avec des marges automatiques ).

Méthode n ° 2: Utiliser un séparateur invisible

Créez une troisième div avec visibility: hidden et flex-grow:1. Cela va naturellement décaler #first-item et #second-item sur le bord gauche, sans besoin de marges automatiques.

#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