Image Flex 集中在其他裝置上，但不在我的筆記型電腦上

Question

我正在創建一個網頁，遇到了一個問題，我的頁面中的Flex上顯示了4個圖像，當我單擊“檢查”並查看它在其他設備上的顯示方式時，我看到頂部有2個圖像，還有2個圖像在底部。在此輸入圖像描述但是當我返回並在筆記型電腦上顯示它時，我看到頂部有3個圖像，底部有1個圖像，請在此處輸入圖像描述我想知道我可以做些什麼來修復它，以便它始終顯示第一張圖片中的圖像（頂部2個，底部2個）。這是我的一段程式碼img{widt

P粉779565855 · Answer

瀏覽器將在一行上容納盡可能多的寬度為 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;
}