Código Flexbox funciona en todos los navegadores excepto Safari. ¿Por qué?

Question

Código Flexbox funciona en todos los navegadores excepto Safari. ¿Por qué?

Columnas de cuadrícula con etiquetas de lista, necesito mostrarlas en el orden correcto por cada 3 columnas, con ancho automático habilitado para cada elemento de lista HTML adicional.

Este es mi ejemplo:

 <style>
        ul {
            margin: 0;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 150px;
            width:auto;
        }
    
        li {
            float: left;
            display: inline-block;
            list-style: none;
            position: relative;
            height: 50px;
            width: 50px;
        }
    </style>

<ul>
    <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>
    <li>11</li>
    <li>12</li>
    </ul>

Esto es lo que he probado hasta ahora y funciona absolutamente bien en todos los demás navegadores, pero no es compatible con el navegador Safari a menos que agregue esto: display: -webkit-flex;.

Quiero convertir la salida así:

1 4 7 10
2 5 8 11
3 6 9 12

Es importante que esto funcione para el navegador Safari hasta ahora I no parece resolver este problema en absoluto, me apropiaría de cualquier ayuda:)

Enlace de prueba:

Http://jsfiddle.net/rafcastro77/3zd7yspg/59 /

39

css html css3 flexbox

Author: Mehdi Bouzidi, 2016-02-01

Source

2 answers

Funciona para mí mostrar: -webkit-inline-box; en safari.

14

Author: saravana va,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-28 10:53:04

score 71 · Accepted Answer

Flexbox es una tecnología CSS3. Esto significa que es relativamente nuevo y algunos navegadores no proporcionan soporte completo para las propiedades de flex.

He aquí un resumen:

IE 8 y 9 no apoyo flexbox. Si desea utilizar propiedades flex en estos navegadores, no se moleste en perder su tiempo. A flexbox polyfill hizo las rondas por un tiempo, pero no funcionó bien y ya no se mantiene.
IE 10 soporta un versión anterior de flexbox y requiere prefijos de proveedor. Tenga en cuenta que ciertas propiedades de la especificación actual no son compatibles con IE10 (como flex-grow, flex-shrink y flex-basis). Ver el Índice de Propiedades Flexbox 2012 .
IE 11 es bueno, pero con errores. Se basa en el estándar actual de flexbox . Vea la pestaña PROBLEMAS CONOCIDOS en esta página para algunos de los problemas. Ver también: la propiedad flex no funciona en IE
Con Chrome, Firefox y Edge eres bueno en todo. Encontrará errores e inconsistencias menores, pero generalmente hay soluciones fáciles. Usted tendrá que ser consciente de Implied Minimum Flex Sizing, que a veces causa problemas de tamaño y barra de desplazamiento.
Las versiones 9 y superiores de Safari admiten las especificaciones actuales de flexbox sin prefijos. Las versiones anteriores de Safari, sin embargo, requieren -webkit- prefijos. A veces min-width y max-width causan problemas de alineación que se puede resolver con flex equivalentes. Ver Elementos Flexibles que no se apilan correctamente en Safari

Para una revisión completa del soporte del navegador flexbox, consulte esta página: http://caniuse.com/#search=flex

Para una forma rápida de agregar muchos (pero no necesariamente todos) prefijos de proveedor use Autoprefixer. Para Safari, ver este artículo para -webkit- prefijos que algunos generadores de prefijos no incluyen.

Para una lista de errores comunes de flex y sus soluciones ver Flexbugs.

También, en este sitio hay:

Información de la Etiqueta Flexbox