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

Las columnas de cuadrícula con tags de lista, debo mostrarlas en el orden correcto por cada 3 columnas, con el ancho automático habilitado para cada elemento adicional de la lista HTML.

Este es mi ejemplo:

 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; }  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

Esto es lo que he intentado hasta ahora y funciona absolutamente bien en cualquier otro navegador pero no es compatible con el navegador Safari a menos que agregue esto: display: -webkit-flex; .

Quiero convertir el resultado así:

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

Es importante que esto funcione para el navegador Safari, hasta ahora no puedo resolver este problema, me gustaría cualquier ayuda 🙂

Enlace de prueba:

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

Flexbox es una tecnología CSS3. Esto significa que es relativamente nuevo y algunos navegadores no brindan soporte completo para las propiedades de flexión.

Aquí hay un descuido:

  • IE 8 y 9 no son compatibles con flexbox. Si desea utilizar propiedades flexibles en estos navegadores, no se moleste en perder el tiempo. Un polyfill flexbox hizo las rondas durante un tiempo, pero no funcionó bien y ya no se mantiene.

  • IE 10 admite una 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 ). Consulte el índice de propiedades de Flexbox 2012 .

  • IE 11 es bueno, pero con errores. Se basa en el estándar de flexbox actual . Vea la pestaña PROBLEMAS CONOCIDOS en esta página para algunos de los problemas. Ver también: propiedad flex no funciona en IE

  • Con Chrome, Firefox y Edge eres bueno en todos lados. Encontrará errores e inconsistencias menores, pero generalmente hay soluciones fáciles. Deberá conocer el tamaño flexible mínimo implícito , que a veces causa problemas de tamaño y barra de desplazamiento.

  • Las versiones de Safari 9 y posteriores admiten la especificación actual de flexbox sin prefijos. Las versiones antiguas de Safari, sin embargo, requieren los prefijos de ” -webkit- . Algunas veces, min-width y max-width causan problemas de alineación que se pueden resolver con equivalentes flex . Consulte los elementos de Flex que no se astackn 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) los prefijos del vendedor, use Autoprefixer . Para Safari, consulte este artículo para los prefijos -webkit- que algunos generadores de prefijos no incluyen.

Para obtener una lista de los errores Flex comunes y sus soluciones, consulte Flexbugs .

Además, en este sitio, hay:

  • Información de etiqueta Flexbox

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