如何使用「flex: 0 0 25%」為 Flex 專案新增 1px 邊距？

使用flex: 0 0 25% 在Flex 專案中加入1 像素邊距

使用Flex 佈局時，可能需要增加一個小的邊距，例如1px，用於彎曲項目。然而，flexbox 本質上不允許使用小數值作為邊距。

對於使用 flex: 0 0 25% 定義的 Flex 項目，直接增加 1px 邊距是不可能的。這是因為 flex-basis 固定為 25%，沒有留下可用的邊距空間。

解決方案：

要在這種情況下實現1px 邊距，利用flex-grow 屬性：

flex: 1 0 22%;

• flex: 1：flex-grow 允許擴展超出其指定的flex-basis 的元素。
• 0：flex-shrink 設定為 0 以確保元素不會縮小到低於其 flex-basis。
• 22%：flex -basis 減少到22%，以考慮每邊所需的1px 邊距（2/11 = 每邊0.19%，當加起來達到22% 時，結果為25%) 。

透過減少 flex-basis 並增加 flex-grow，元素將擁有所需的邊距，同時仍保持其定義的比例。

範例:

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

<div>

以上是如何使用「flex: 0 0 25%」為 Flex 專案新增 1px 邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！