包裹後如何消除 Flexbox 列之間的間隙？

換行後刪除Flex 項目列之間的空間

使用Flexbox 在具有設定高度的容器內建立項目列時，您可以當列換行到新行時，列之間會遇到不必要的間隙。出現此問題的原因是align-content的預設設定：stretch。

Align-content決定了多行Flex專案沿橫軸的分佈。當設定為拉伸時，彎曲線沿著可用空間均勻分佈。要覆蓋此行為並消除間隙，您可以對容器應用align-content：flex-start。

與單行Flex容器相比，多行Flex容器（flex-wrap：wrap）利用align-content屬性來分佈柔性線。根據flexbox規範，align-content有以下六個值：

• flex-start
• flex-end
• center
• space -之間
• 周圍空間
• 拉伸（預設）

拉伸允許柔性線擴展並填充任何剩餘空間。如果存在負的可用空間，則拉伸的行為類似於 Flex-Start，而在所有其他情況下，它會在各行之間平均劃分空間。

透過設定align-content: flex-start，可以對齊 Flex 線到橫軸的起點，有效消除列之間的任何間隙。這將為您提供所需的結果，項目彼此整齊地排列在一起，填充可用空間。

以上是包裹後如何消除 Flexbox 列之間的間隙？的詳細內容。更多資訊請關注PHP中文網其他相關文章！