如何在不拉伸的情況下調整最後一行的 Flex 項目寬度？

調整最後一行上的 Flex 項目寬度

嘗試在容器中均勻分佈元素（最後一行除外）時會出現挑戰。簡單地使用 text-align: justify 對齊元素是不夠的，因為元素之間沒有空格。 Flexbox 提供了一個解決方案，但預設行為會將最後一行的元素拉伸到整個寬度。

要實現類似對齊對齊的行為（其中元素在最後一行使用自然寬度），請使用以下方法：

1. 添加幻影物品：
   建立幾個佔據最後一個插槽的「幻影」物品容器。這些項目可以透過可見性隱藏：隱藏。

例如，以使用者 #82 作為最後一個條目，新增假使用者 83、84 和 85，並且可見性：隱藏。

2. 使用單一幻像物品：
   或者，使用單一幻像末尾的 item 具有可見性：hidden 和 flex-grow：10。使用 :last-child 或 :last-of-type 偽類對其進行定位。

此方法允許最後一行的元素保持其自然寬度，同時將剩餘空間均勻分佈在虛擬項目上。

以上是如何在不拉伸的情況下調整最後一行的 Flex 項目寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！