css - que - flex-wrap not working

Row Wrap en flex-box no envuelto en Safari

Question

Un contenedor flexible tiene cuatro hijos, cada uno con una base flexible del 25% y un ancho mínimo. flex-flow está configurado para envolver filas. Los navegadores distintos de Safari manejan esto como se esperaba: si se alcanza el ancho mínimo, envuelve el siguiente elemento en la siguiente fila. En Safari desborda el contenedor.

Vea la demostración aquí: http://codepen.io/lbilharz/pen/aJbkI

JADE

h1 Why this ain''t wrappin'' in mobile-safari?
  .flex
    for i in [''one'',''two'',''three'',''four'']
      .item
        h2=i

Aguja

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

¿Algunas ideas?

Answer 1

¡Por un comentario en bugs.webkit.org , parece que la solución es simple!

Si tu estilo es

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1;
    flex: 1;
}

solo necesita agregar más explícita a su declaración flex . De hecho, creo que solo una línea necesita cambiar así

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
} 

Answer 2

Algunos navegadores no son totalmente compatibles con todos los elementos de CSS3. Prueba esto:

  display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;

Answer 3

Este es un error de Safari IOS. Entonces la solución / solución consiste en establecer la base flexible en un ancho explícito en lugar de automático para el elemento hijo.

Answer 4

Estoy usando un max-width en mis elementos flexibles, así que pude resolver esto estableciendo explícitamente el max-width dentro de la propiedad flex :

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
li {
  width: 100%;
  max-width: 500px;
  flex: 1 1 500px;
}