Image Flex se concentre sur d'autres appareils, mais pas sur mon ordinateur portable

Question

Je crée une page Web et je rencontre un problème, j'ai 4 images qui apparaissent sur le flexible de ma page, lorsque je clique sur "Inspecter" et que je vois comment elles apparaissent sur d'autres appareils, je vois qu'il y en a 2 images en haut et 2 autres images en bas. Entrez la description de l'image ici

Mais lorsque je reviens en arrière et que je l'affiche sur mon ordinateur portable, je vois 3 images en haut et 1 image en bas, entrez la description de l'image ici

Je veux savoir ce que je peux faire pour le réparer afin qu'il affiche toujours les images de la première photo (2 en haut, 2 en bas).

Ceci est un morceau de mon code

img {
width: 350px;
padding: 5px;
transition: transform .2s;
}

img:hover {
cursor: pointer;
transform: scale(1.03);
}

.container {
margin-top: 80px;
display: flex;
max-width: 1500px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

P粉779565855 · Answer

Le navigateur pourra contenir autant d'images d'une largeur de 350 pixels sur une seule ligne. S'ils ne correspondent pas, il les passe à la ligne suivante.

Si vous souhaitez toujours avoir deux images par ligne dans la flexbox, vous pouvez définir la largeur des images à 50 % de la largeur de l'écran. Puisque vous avez 5px de remplissage de chaque côté, vous pouvez le soustraire de 50% en utilisant la fonction calc() comme ceci :

width: calc(50% - 10px);

Voici un exemple de votre code :

img {
  width: calc(50% - 10px);
  padding: 5px;
  transition: transform 0.2s;
}

img:hover {
  cursor: pointer;
  transform: scale(1.03);
}

.container {
  margin-top: 80px;
  display: flex;
  max-width: 1500px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}