Image Flex 集中在其他设备上，但不在我的笔记本电脑上

Question

我正在创建一个网页，遇到了一个问题，我的页面中的 Flex 上显示了 4 个图像，当我单击“检查”并查看它在其他设备上的显示方式时，我看到顶部有 2 个图像，还有 2 个图像在底部。在此处输入图像描述

但是当我返回并在笔记本电脑上显示它时，我看到顶部有 3 个图像，底部有 1 个图像，请在此处输入图像描述

我想知道我可以做些什么来修复它，以便它始终显示第一张图片中的图像（顶部 2 个，底部 2 个）。

这是我的一段代码

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;
}

Answer 1

浏览器将在一行上容纳尽可能多的宽度为 350 像素的图像。如果不适合，它会将它们换行到下一行。

如果您希望弹性框中每行始终有两个图像，您可以将图像的宽度设置为屏幕宽度的 50%。因为每边都有 5px 的填充，所以您可以使用 calc() 函数从 50% 中减去它，如下所示：

width: calc(50% - 10px);

以下是您的代码的示例：

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;
}