如何在 Flexbox 中實現一致的間距？

Flexbox 中的等間距：彌合差距

Flexbox 中的一個常見挑戰是在專案之間實現相等間距，包括第一個相等個和最後一個項目。雖然「justify-content: space-around」屬性很接近，但由於間距不均勻，它會造成視覺不平衡。

解決間距困境

幸運的是，有兩種有效的方法可以確保空間分佈均勻。

方法一：偽元素

現代瀏覽器將 ::before 和 ::after 偽元素視為 Flex 項目。透過將它們加入容器中，我們可以利用「justify-content: space- Between」來創造等間距的錯覺。偽元素佔據零寬度，在可見的彈性項目之間留出相等的空間。

HTML 代碼：

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS 代碼：

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-container::before,
flex-container::after {
  content: "";
}

方法二：偏移間距

另一種方法涉及使用邊距或填充來建立偏移間距。此方法在不同瀏覽器中的工作效果更加一致，但可能需要額外的 CSS 調整。

HTML 程式碼：

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

CSS 程式碼：

flex-container {
  display: flex;
  justify-content: space-between;
}

flex-item {
  margin-left: 10px;
  margin-right: 10px;
}

/* Remove margin from first and last items */
flex-container > :first-child {
  margin-left: 0;
}
flex-container > :last-child {
  margin-right: 0;
}

這兩種方法都有效均衡了彈性項目之間的間距，提供了統一的視覺排列。

以上是如何在 Flexbox 中實現一致的間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！