我正在建立一個網頁，遇到了一個問題，我的頁面中的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;
} 
瀏覽器將在一行上容納盡可能多的寬度為 350 像素的圖像。如果不適合，它會將它們換行到下一行。
如果您希望彈性框中每行始終有兩個圖像，您可以將圖像的寬度設定為螢幕寬度的 50%。因為每邊都有 5px 的填充，所以您可以使用 calc() 函數從 50% 中減去它，如下所示：
以下是您的程式碼的範例：