html - internet - propiedad flex no funciona en IE

flex images css

Question

No he podido determinar por qué flexbox no funciona en IE 11.

Para las pruebas, obtuve un diseño de flexbox muy simple de CodePen y he pegado la información a continuación.

Chrome funciona según lo previsto; IE11 falla.

Imagen de diseño exitoso en Chrome:

Imagen de falla de diseño en IE11

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

Answer 1

IE tiene un problema al analizar la propiedad flex .

Aquí hay algunas soluciones que me han funcionado:

• Use las propiedades de mano dura en lugar de la taquigrafía.

  En lugar de algo como esto: flex: 0 0 35% .

  Prueba esto:

  • flex-grow: 0
  • flex-shrink: 0
  • flex-basis: 35%

• Asegúrese de que flex-shrink esté habilitado.

  Entonces en vez de esto: flex: 0 0 35%

  Intenta esto: flex: 0 1 35%

• Cuidado con porcentajes y valores sin unidades con flex-basis

  Esto puede depender de su versión de IE11. El comportamiento parece variar.

  Pruebe estas variaciones:

  • flex: 1 1 0
  • flex: 1 1 0px
  • flex: 1 1 0%

  Más detalles aquí:

  • Comportamiento de la imagen dentro de flexbox (filas incrustadas en columnas)
  • ¿Por qué la propiedad de taquigrafía se comporta de forma diferente que las propiedades de mano larga en IE?

• En lugar de flex: 1 use flex: auto (o agregue en flex-basis: auto )

  Si está utilizando flex: 1 en flex-direction: row (como en pantallas más grandes), y cambia a flex-direction: column en una consulta de medios (digamos para dispositivos móviles), puede encontrar que sus artículos flexibles colapso.

  En su consulta de medios, agregue flex-basis: auto . Esto anulará el valor de flex-basis en la regla flex: 1 (que generalmente es 0 , 0px o 0% , dependiendo del navegador).

  Usar flex: auto también debería funcionar, que es la abreviatura de:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

• Utilice propiedades de width / height vieja moda en lugar de flex .

• Usa diseño de block lugar de diseño flex .

  No es necesario que abandone por completo el diseño flexible. Pero para un contenedor en particular, puede realizar el trabajo con la display: block lugar de display: flex; flex-direction: column display: flex; flex-direction: column .

  Por ejemplo, al necesitar usar el truco de relleno para insertar de manera receptiva un video en un elemento flexible, el obstáculo que enfrenté fue que algunos navegadores no funcionan bien con un porcentaje de relleno (o margen) en un contenedor flexible .

  Para que funcione, cambié el valor de display en el elemento flexible de esto:

  /* a flex item, also a nested flex container */
  #footer-container > article {
      display: flex;
      flex-direction: column;
  }

  a esto:

  #footer-container > article {
      display: block;
  }

Answer 2

Para mí, usando

  flex: 1 1 auto;

en lugar de

  flex: 1;

resuelto el problema de flexión en IE 11.

Answer 3

Solo use flex:1 0 auto; . Funcionará.