Image Flex focuses on other devices, but not on my laptop

Question

I'm creating a web page and I'm running into an issue, I have 4 images displayed on the flex in my page, when I click "Inspect" and see how it displays on other devices, I see the top There are 2 images, and 2 more images at the bottom. Enter image description here

But when I go back and display it on my laptop I see 3 images at the top and 1 image at the bottom, enter image description here

I'm wondering what I can do to fix it so that it always shows the images from the first picture (2 on top, 2 on bottom).

This is a piece of my 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

Browsers will fit as many images as 350 pixels wide on a single line. If they don't fit, it wraps them to the next line.

If you want to always have two images per row in the flexbox, you can set the width of the images to 50% of the screen width. Because you have 5px of padding on each side, you can subtract it from 50% using the calc() function like this:

width: calc(50% - 10px);

The following is an example of your 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;
}