Code Flexbox fonctionnant sur tous les navigateurs sauf Safari. Pourquoi?

Colonnes de grid avec des balises de liste, je dois les afficher dans un ordre correct toutes les trois colonnes, avec la largeur automatique activée pour chaque élément de liste HTML supplémentaire.

Ceci est mon exemple:

 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

C’est ce que j’ai essayé jusqu’ici et fonctionne parfaitement sur tous les autres navigateurs mais n’est pas compatible avec le navigateur Safari, sauf si j’ajoute ceci: display: -webkit-flex; .

Je veux convertir la sortie comme ceci:

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

Il est important que cela fonctionne pour le navigateur Safari jusqu’à présent, je ne peux pas du tout résoudre ce problème, j’aurais besoin d’aide 🙂

Lien de test:

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

Flexbox est une technologie CSS3. Cela signifie qu’il est relativement nouveau et que certains navigateurs ne prennent pas totalement en charge les propriétés flex.

Voici un résumé:

  • IE 8 et 9 ne supportent pas la flexbox. Si vous souhaitez utiliser les propriétés flex dans ces navigateurs, ne perdez pas votre temps. Un polyfill flexbox a fait le tour pendant un certain temps, mais cela n’a pas bien fonctionné et n’est plus maintenu.

  • IE 10 prend en charge une version précédente de flexbox et nécessite des préfixes de fournisseur . Sachez que certaines propriétés de la spécification actuelle ne sont pas sockets en charge dans IE10 (telles que flex-grow , flex-shrink et flex-basis ). Voir l’ indice de propriété Flexbox 2012 .

  • IE 11 est bon, mais bogué. Il est basé sur la norme Flexbox actuelle . Voir l’onglet PROBLEMES CONNUS sur cette page pour certains problèmes. Voir aussi: propriété Flex ne fonctionne pas dans IE

  • Avec Chrome, Firefox et Edge, tout va bien. Vous trouverez des bogues mineurs et des incohérences, mais il existe généralement des correctifs faciles. Vous devez connaître le dimensionnement de flex minimum implicite , ce qui entraîne parfois des problèmes de dimensionnement et de barre de défilement.

  • Les versions 9 et supérieures de Safari prennent en charge la spécification Flexbox actuelle sans préfixes. Les anciennes versions de Safari nécessitent -webkit- préfixes -webkit- . Parfois, min-width et max-width provoquent des problèmes d’alignement qui peuvent être résolus avec des équivalents flex . Voir les éléments Flex ne s’empilant pas correctement dans Safari

Pour une revue complète de la prise en charge du navigateur Flexbox, consultez cette page: http://caniuse.com/#search=flex

Pour un moyen rapide d’append de nombreux préfixes (mais pas nécessairement tous), utilisez Autoprefixer . Pour Safari, consultez cet article pour les préfixes -webkit- que certains générateurs de préfixes n’incluent pas.

Pour une liste des bugs flex courants et de leurs solutions de contournement, consultez Flexbugs .

De plus, sur ce site, il y a:

  • Informations sur les tags Flexbox

Cela fonctionne pour moi affichage: -webkit-inline-box; en safari.