Flexbox bug safari

Bonjour

J'ai un problème d'alignements avec Flexbox sur Safari.
Pour mieux comprendre, j'ai préparé un JSfiddle https://jsfiddle.net/jrtnr5b3/

L'alignement fonctionne sur Firefox et Chrome, mais pas sur Safari.
C'est un casse-tête sur lequel je travaille depuis plusieurs jours, pouvez-vous m'aider ?
Bien à vous
Modifié par Oziris (17 Feb 2017 - 14:52)

Non puisque Flex-basis ne spécifie que les largeurs. Auriez-vous une autre proposition ?
Modifié par Oziris (17 Feb 2017 - 15:10)

Oziris a écrit :
Non puisque Flex-basis ne spécifie que les largeurs. Auriez-vous une autre proposition ?

Oups, autant pour moi

Tintin75 a écrit :
Safari, ça existe toujours ?

Tant que les iPhones ne seront pas détrônés...

Allez je m'y colle :

Je viens de jeter un coup d'oeil au code du premier lien : attention aux redondances (ex : text-align:center déclaré deux fois sur le même élément) et aussi aux règles mal déclarées (ex : il manque une valeur à flex).

Avec ce minimum syndical ça marche : JSFidle

Il faut reconnaitre qu'il y a un bug sous d'autres plateformes de code telle que CodePen empêchant que cela fonctionne en l'état (et ce n'est pas le premier que j'ai repéré), mais ce n'est pas le sujet...

Donc, pour ceci :

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Il faut au minimum ceci :

.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  min-height: 100vh;
}

.grid > * {
  width: 33.33%;
  outline: 1px solid #333; /* for demo */
}

Modifié par Olivier C (18 Feb 2017 - 22:04)

Merci beaucoup d'avoir pris le temps.

Comme vous avez pu voir sur le premier lien, le but est d'instaurer une mise en page automatique en fonction du nombre de cases présentent, avec un maximum de 3 par lignes. (33.333%)
Les bouton au-dessus permettent de simuler cela.

https://jsfiddle.net/h0hjfpt9/4/

J'ai donc repris le code précédent avec les boutons au-dessus. Je constate que l'effet est le même qu'un tableau : lorsqu'une case disparaît, il y a un ou deux trous, et la case ne s'étend pas au maximum de sa largeur. Et cela même avec

.grid > * {min-width: 33.33%;}

Donc cela est effectivement mieux écrits et fonctionnel sous Safari, mais l'effet recherché n'est pas le même. Le résultat recherché est celui du premier lien sous Firefox ou Chrome : lorsqu'il manque une ou deux cases sur une ligne, celle(s) qui reste s'étendent au maximum.
Est-ce vraiment possible ?
Modifié par Oziris (18 Feb 2017 - 14:14)