[Résolu] Flexbox justify-content

Salut,

J'ai une page avec 3 bloc disposé en flexbox et j'ai mis un justify-content: space-evenly pour la séparation de mes blocs. Là pas de soucis.

Mon seul problème c'est que sur IE ce n'est pas compatible. Comment pourrais-je faire pour que cela fonctionne sur IE ?

.service-home{
	text-align: center;
	padding: 0 100px 100px;
	.pictures-services{
		display: flex;
		justify-content: space-evenly;
		.image-service{
                  margin:0 10px;
                     }
  }

<section class="service-home">
	<div class="pictures-services">
		<div class="image-service one-service">
			<a href=""><img src="./assets/images/test2.png"></a>
			<h3>Lorem Ipsum</h3>
			<a href="">En savoir plus</a>
		</div>
		<div class="image-service two-service">
			<a href=""><img src="./assets/images/test3.png"></a>
			<h3>Lorem Ipsum</h3>
			<a href="">En savoir plus</a>
		</div>
		<div class="image-service three-service">
			<a href=""><img src="./assets/images/test4.png"></a>
			<h3>Lorem Ipsum</h3>
			<a href="">En savoir plus</a>
		</div>
	</div>
</section>

Modifié par tcdev (11 Dec 2019 - 12:33)

Bonjour,

as-tu testé avec Autoprefixer pour ajouter les préfixes qui vont bien ? => https://jsfiddle.net/ah76vt23/
Si c'est la valeur qui n'est pas comprise comme avec Safari (en 2017 en tout cas), j'ai cette astuce à base de pseudo + space-between https://stackoverflow.com/a/47535338 (le codepen est plus clair je pense )

tcdev a écrit :

Mon seul problème c'est que sur IE ce n'est pas compatible. Comment pourrais-je faire pour que cela fonctionne sur IE ?

Hello,

Si une dégradation est tolérée sur IE, je tenterais un fallback simple :

.pictures-services{
  display: flex;
  justify-content: space-between; /* ok partout */
  justify-content: space-evenly; /* ok partout sauf IE */
  }

Jouable ?

Merci pour les solutions. J'en ai trouvé une qui fonctionne assez bien:

Si jamais ça peut intéresser des personnes

.className {
  justify-content: space-between;
}

@supports not (-ms-ime-align: auto) {
  justify-content: space-evenly
}

tcdev a écrit :
Merci pour les solutions. J'en ai trouvé une qui fonctionne assez bien:

Si jamais ça peut intéresser des personnes

.className {
  justify-content: space-between;
}

@supports not (-ms-ime-align: auto) {
  justify-content: space-evenly
}

Je ne comprends pas la logique de ton raisonnement :
Ici tu dis :
1- tout le monde reçoit space-between
2- ceux qui ne comprennent pas un truc spécifique à IE (qui n'a d'ailleurs rien à voir avec justify-content) reçoivent space-evenly et écrasent space-between... on en déduit que c'est tout le monde sauf IE.

N'aurait-il pas été bien plus logique de cibler ceux qui supportent space-between plutôt que de faire des devinette hasardeuses sur un truc comme -ms-ime-machinchose ?

.className {
  justify-content: space-between;
}

@supports (justify-content: space-evenly) {
  justify-content: space-evenly;
}

Ce qui revient au final à écrire :

.className {
  justify-content: space-between;
  justify-content: space-evenly;
}