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