如何將最後一行中的 Flexbox 項目調整到其自然寬度？

使用Flexbox 實現動態最後一行項目的合理對齊

在此場景中，目標是確保最後一行的Flex 項目容器的行自然地與其內容寬度對齊，同時尊重容器的可用空間。這與 Flexbox 拉伸 Flex 項目以填充整行的固有行為相矛盾。

嘗試Flexbox 對齊

首次嘗試使用帶有display: flex; 的Flexbox；和flex-wrap：包裹；達到了不錯的結果，直到到達最後一行，所有彈性項目都拉伸以適應容器寬度。這種效果是不可取的，尤其是當最後一行只剩下一個或兩個項目時。

解決方案：Phantom Items 和 Flex-Grow

解決方案涉及引入“phantom” ”連續佔據最後一行的項目，本質上是作為佔位符來填充多餘的空間並防止剩餘的項目過度拉伸。彈性項目之後，附加3-4 個具有相同尺寸和可見性的虛擬項目：隱藏。 flex-grow：10. 使用:last-child 或:last-of-type 偽類專門針對此項目

1. 實際實現

例如，如果使用者#82 是容器中最後一個可見項目：

新增具有可見性的虛擬用戶#83、#84 和#85：隱藏。 🎜>

結果

這種方法會導致最後一行彈性項目自然地與其內容寬度對齊，從而消除了先前觀察到的過度拉伸。 🎜>

以上是如何將最後一行中的 Flexbox 項目調整到其自然寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！