html - content - El código Flexbox funciona en todos los navegadores, excepto Safari. ¿Por qué?

display flex safari

Question

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 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 la salida de esta manera:

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

Es importante que esto funcione para el navegador Safari hasta el momento. Parece que no puedo resolver este problema, me gustaría pedir ayuda :)

Enlace de prueba:

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

Answer 1

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

Aquí hay un resumen:

• 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 por un tiempo, pero no funcionó bien y ya no se mantiene.

• IE 10 es compatible con 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 actual de flexbox . Consulte la pestaña PROBLEMAS CONOCIDOS en esta página para conocer algunos de los problemas. Ver también: la propiedad flex no funciona en IE

• Con Chrome, Firefox y Edge eres bueno por todas partes. Encontrarás pequeños errores e inconsistencias, pero generalmente hay soluciones fáciles. Deberá tener en cuenta el tamaño mínimo flexible 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. Sin embargo, las versiones más antiguas de Safari requieren prefijos -webkit- . A veces min-width max-width causan problemas de alineación que pueden resolverse con equivalentes flex . Ver elementos Flex que no se apilan correctamente en Safari

Para una revisión completa de la compatibilidad con el navegador flexbox, consulte esta página: http://caniuse.com/#search=flex

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

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

Además, en este sitio, hay:

• Información de etiqueta de Flexbox

Answer 2

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