Fila Envolver en flex-cuadro no envolver en Safari

Un contenedor flex tiene cuatro hijos, cada uno con un flex-base de 25% con un min-width. flex-el flujo se establece fila de abrigo. Otros navegadores, a continuación, Safari manejar esto como era de esperar: si el min-width es alcanzado, se envuelve el siguiente punto de la fila siguiente. En Safari se desborde el contenedor.

Ver la demo 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

Lápiz

.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

Alguna idea?

InformationsquelleAutor Lars Bilharz | 2014-08-18

4 Kommentare

  1. 52

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

    sólo se necesita añadir más claridad a su flex declaración. De hecho, creo que sólo hay una línea que necesita cambiar, como 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;
    } 
    • Gracias por tu comentario, me ayudó a entender flex-base un poco más. También puede omitir min-width y escribir -webkit-flex: 1 0 15em; flex: 1 0 15em;.
  2. 6

    Estoy usando un max-width en mi flex, por lo que yo era capaz de resolver mediante la definición explícita de la max-width dentro de la flex propiedad:

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

    Este es un Safari de IOS error. Por lo que la solución /solución consiste en establecer el flex-base a una explícita de ancho en lugar de auto para niño elemento.

  4. -2

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

      display:-webkit-box;
      display:-webkit-flex;
      display:-webkit-flexbox;
      display:-moz-flex;
      display:-moz-box;
      display:-ms-flexbox;
      display:flex;
    • gracias por tu respuesta, pero si usted toma un vistazo a la codepen, usted verá que el proveedor de prefijos que se añaden de forma automática.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea