html - content - El código Flexbox funciona en todos los navegadores, excepto Safari. ¿Por qué?
display flex safari (2)
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>
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:
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
yflex-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 vecesmin-width
max-width
causan problemas de alineación que pueden resolverse con equivalentesflex
. 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
Funciona para mí mostrar: -webkit-inline-box; en safari