tag - flex wrap css tricks

El margen automático flexible no funciona en IE10/11

Question

Tengo un diseño complejo donde centro varios elementos vertical y horizontalmente con flexbox.

El último elemento tiene margin-right:auto; aplicado para empujar los elementos hacia la izquierda (y negar centrarlos).

Esto funciona correctamente en todas partes excepto en IE10 / 11 y me ha vuelto loco.

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

Verá dos elementos en la pantalla que deben estar alineados a la izquierda en el lado del padre rojo (es decir, ambos deben estar centrados, pero el último elemento tiene el margin-right:auto; aplicado y está llenando toda la línea, presionando el otro elemento y en sí mismo en el costado): este es el comportamiento correcto. Excepto en IE10 / 11 donde ambos elementos están centrados incorrectamente, es decir, el margin-right:auto; del segundo elemento margin-right:auto; es ignorado

¿Algún experto en IE / flexbox que haya encontrado algo como esto antes?

Answer 1

Esto parece ser un error de IE.

De acuerdo con la especificación flexbox:

8.1. Alineándose con márgenes automáticos

Antes de la alineación a través de justify-content y align-self , cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Nota: Si el espacio libre se distribuye a los márgenes automáticos, las propiedades de alineación no tendrán efecto en esa dimensión porque los márgenes habrán robado todo el espacio libre restante después de la flexión.

En otras palabras, los márgenes automáticos tienen prioridad sobre justify-content .

De hecho, si un elemento tiene márgenes automáticos aplicados, las propiedades de alineación de palabras clave como justify-content y align-self no tienen efecto (porque los márgenes automáticos han ocupado todo el espacio).

Su código funciona como se espera en Chrome y Firefox porque esos navegadores cumplen con las especificaciones.

IE10 e IE11 parecen no cumplir. No están aplicando el margen automático como se define en la especificación.

(Tenga en cuenta que IE10 se basa en una versión anterior de la especificación ).

Soluciones

Método n. ° 1: use solo márgenes automáticos

Si se elimina justify-content , los márgenes automáticos funcionan bien en IE10 / 11. Así que no uses justify-content . Use márgenes automáticos en todo momento. ( Ver ejemplos de alineación con márgenes automáticos ).

Método # 2: Usa un espaciador invisible div

Cree un tercer div con visibility: hidden y flex-grow:1 . Naturalmente, esto desplazará #first-item y #second-item al borde izquierdo, sin necesidad de márgenes automáticos.

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