如何在不拉伸的情况下调整最后一行的 Flex 项目宽度？

调整最后一行上的 Flex 项目宽度

尝试在容器中均匀分布元素（最后一行除外）时会出现挑战。简单地使用 text-align: justify 对齐元素是不够的，因为元素之间没有空格。 Flexbox 提供了一个解决方案，但默认行为将最后一行的元素拉伸到整个宽度。

要实现类似对齐对齐的行为（其中元素在最后一行使用自然宽度），请使用以下方法：

1. 添加幻影物品：
   创建几个占据最后一个插槽的“幻影”物品容器。这些项目可以通过可见性隐藏：隐藏。

例如，以用户 #82 作为最后一个条目，添加假用户 83、84 和 85，并且可见性：隐藏。

2. 使用单个幻像物品：
   或者，使用单个幻像末尾的 item 具有可见性：hidden 和 flex-grow：10。使用 :last-child 或 :last-of-type 伪类对其进行定位。

此方法允许最后一行的元素保持其自然宽度，同时将剩余空间均匀分布在虚拟项目上。

以上是如何在不拉伸的情况下调整最后一行的 Flex 项目宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！