如何在圖庫中的 Flex 項目之間實現 1px 間距？

如何調整圖片庫Flex 項目中的間距

在Flexbox 版面配置中，Flex 值為「0 0 25%」的項目具有固定的寬度，不會收縮或增長。若要在這些項目之間新增空間，同時保持網格狀結構，可以套用邊距。但是，施加 1% 的邊距會導致間隙過大。

要達到 1 像素的邊距，請使用彈性值「1 0 22%」。這會將 flex-basis 設定為 22%，確保每行只有四個項目。 flex-grow 值設定為 1，可讓專案成長並填充邊距留下的剩餘空間。這會在專案之間創建一個微妙的 1px 間隙。

#foto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 10px;
}

.foto {
  flex: 1 0 22%;
  min-height: 50px;
  margin: 1px;
  background-color: red;
}

以上是如何在圖庫中的 Flex 項目之間實現 1px 間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！