4
votes

Différentes implémentations de Flexbox dans Firefox et Chrome

Le code suivant fonctionne comme prévu dans Firefox, mais dans Chrome, les images deviennent beaucoup plus volumineuses que le conteneur flex.

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>
.r {
  width: 100%;
  height: auto;
  min-width: unset;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

Firefox : entrez la description de l'image ici

Chrome : entrez la description de l'image ici


4 commentaires

Essayez .r {max-width: 100%; hauteur: auto}


évitez toujours d'avoir l'image comme élément flex, enveloppez-les dans l'élément flex


@TemaniAfif mais ce n'est pas vraiment une solution. Je veux juste me demander pourquoi il y a deux implémentations différentes


Quel résultat décevant.


3 Réponses :


1
votes

Le code suivant fonctionne comme prévu dans Firefox

Je ne suis pas d'accord avec cela, car pour moi Chrome se comporte comme prévu pour deux raisons:

  1. Vous définissez la largeur de l'image sur 100% , ce qui signifie 100% de leur bloc contenant (conteneur) défini par 600px . Ainsi, chaque image sera 600px

  2. L'image ne peut pas rétrécir au-delà de sa taille de contenu en raison de la largeur minimale code> configuration (notez que l'utilisation de unset équivaut à initial dans ce cas donc c'est en quelque sorte inutile). L'image sera donc conservée à 600px

Si vous ajoutez min-width: 0 , l'image ne rétrécira qu'en largeur:

<div class="container">
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
  <div class="r"><img src="https://via.placeholder.com/1000x500"></div>
</div>
.r {
  width: 100%;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

img {
  max-width: 100%;
}

le comportement de chrome semble avoir changé, donc le ci-dessous n'est plus nécessaire dans la dernière version

Maintenant, si l'on considère la hauteur que vous sont confrontés à l'effet stretch qui n'est pas non plus le même dans les deux navigateurs. C'est un peu délicat d'expliquer 1 mais si vous modifiez l'alignement par défaut, vous obtiendrez le résultat attendu dans Chrome:

p>

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>
.r {
  width: 100%;
  height:658%; /*any value here with %*/
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

Ou si vous modifiez la hauteur en utilisant la valeur de pourcentage vous le ferez échouer et vous aurez également ce que vous voulez (c'est un peu piraté car nous déclenchons un autre problème pour résoudre le problème actuel)

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>
.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
  align-items:flex-start;
}

Pourquoi Firefox se comporte comme ça?

Je ne sais pas exactement, mais l'explication logique est que Firefox est ne tient pas compte de la configuration par défaut min-width et donne la priorité au maintien du ratio et non à l'effet d'étirement.


1 Au départ, votre image définit la hauteur du conteneur car ils sont grands (environ 700px de hauteur), cette hauteur est utilisée par le conteneur puis nous appliquons les propriétés à notre image afin qu'elles rétrécissent en largeur et depuis l'alignement par défaut Dans le cas de l'étirement, ils s'étireront jusqu'à la hauteur du conteneur initialement définie par leur propre hauteur initiale créant ce rendu.

Si nous supprimons l'effet d'étirement, l'image essaiera de conserver leur rapport puisque nous avons supprimé la contrainte de hauteur.

Même logique si nous considérons la valeur en pourcentage pour la hauteur. Celui-ci échouera à auto et nous reviendrons au comportement par défaut (en gardant le rapport hauteur / largeur)


Une autre alternative

Le problème est survenu en raison de l'utilisation de l'image qui est un élément remplacé avec une dimension intrinsèque où le calcul de la largeur / hauteur n'est pas aussi simple que l'autre élément.

Pour éviter un tel comportement, mieux envelopper l'image à l'intérieur d'un div et évitez de les avoir comme éléments flexibles.

<div class="container">
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
  <img src="https://via.placeholder.com/1000x500" class="r" >
</div>
.r {
  width: 100%;
  /*height: auto; useless */
  min-width: 0;
  max-width: 100%;
}

.container {
  display: flex;
  width: 600px;
}

4 commentaires

@TermaniAfif merci pour l'explication. donc c'est vraiment Firefox qui l'implémente mal .. qui savait: / merci pour l'info!


@TheRuler Je n'appellerais pas cela faux mais nous avons des cas particuliers où ce n'est pas la même chose. Probablement à l'avenir, il sera corrigé afin que nous ayons le même comportement


oui, le mauvais était le mauvais mot - je voulais dire différent. Merci encore!


@TheRuler J'ai ajouté une autre méthode expliquant mon commentaire précédent sur l'ajout d'un div supplémentaire



0
votes

Merci à @TemaniAfif qui m'a guidé dans la bonne direction et j'ai trouvé ceci:

<div class="container">
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
	<img src="https://lundbeckconsulting.no/Temp/illu1.jpg" class="r" />
</div>
.r {
	width: 100%;
	height: 100%;
	min-width: 0px;
	max-width: 100%;
}

.container {
    display: flex;
    width: 600px;
}


0 commentaires

1
votes

@TheRuler, La meilleure solution est d'envelopper la balise d'image dans un div ou une étendue, pour rendre les images selon Firefox. Firefox fonctionnera également très bien si vous enveloppez les images dans un div ou une étendue.

Vous pouvez maintenant me demander pourquoi c'est correct.

Fondamentalement, l'affichage de flex a une valeur par défaut qui lui est attachée, qui sont:

.container { display: flex; flex-direction: column;}
.container > div { flex: 1; height: 300px;}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

Maintenant, pour Firefox et Chrome, la valeur par défaut est la même. Mais le rendu est toujours différent dans les deux navigateurs, en particulier dans le cas d'une image en tant qu'enfant flex.

Maintenant, qui est correct est discutable, et qui suit correctement les directives est également discutable.

Si vous regardez la spécification de flex, il dit que les règles flex devraient prévaloir sur les propriétés CSS width et height. Donc, dans ce cas, Firefox réduit la taille des images pour les adapter correctement au parent 600px.

Maintenant, si vous voyez cet exemple,

flex-grow: 0
flex-shrink: 1
flex-basis: auto
flex: 0 1 auto /* Shorthand */

Donc si vous voyez ce code dans les deux navigateurs, vous verrez la différence. Chrome valorise la propriété height de l'enfant flex alors que Firefox ne la valorise pas. Il en va de même pour la hauteur et la largeur de l'image. Chrome ne prévaut pas sur la hauteur.

Donc, les deux navigateurs ont opté pour leur propre implémentation, ce qui dans ce cas ne correspond pas et il est discutable de savoir qui est correct.

Alors enveloppez-les dans span ou div pour le faire fonctionner à la fois dans le navigateur, ce qui devrait être la bonne réponse sans piratage. Une autre solution résoudra le problème, mais c'est une sorte de hack pour résoudre le problème.

S'il vous plaît laissez-moi savoir si vous l'obtenez Merci


1 commentaires

salut! merci font l'explication, maintenant je comprends mieux, j'ai fourni une réponse qui semble fonctionner. pourriez-vous le regarder et me dire si j'ai besoin de changer quoi que ce soit. Merci!