如何将最后一行中的 Flexbox 项目调整到其自然宽度？

使用 Flexbox 实现动态最后一行项目的合理对齐

在此场景中，目标是确保最后一行的 Flex 项目容器的行自然地与其内容宽度对齐，同时尊重容器的可用空间。这与 Flexbox 拉伸 Flex 项目以填充整行的固有行为相矛盾。

尝试 Flexbox 对齐

首次尝试使用带有 display: flex; 的 Flexbox；和 flex-wrap：包裹；达到了不错的结果，直到到达最后一行，所有弹性项目都拉伸以适应容器宽度。这种效果是不可取的，尤其是当最后一行只剩下一个或两个项目时。

解决方案：Phantom Items 和 Flex-Grow

解决方案涉及引入“phantom” ” 连续占据最后一行的项目，本质上是作为占位符来填充多余的空间并防止剩余的项目过度拉伸。要实现此方法：

1. 在容器中的最后一个真正的弹性项目之后，附加 3-4 个具有相同尺寸和可见性的虚拟项目：隐藏。
2. 或者，创建一个单一的虚拟项目具有可见性的项目：hidden 和 flex-grow：10. 使用 :last-child 或 :last-of-type 伪类专门针对此项目

实际实现

例如，如果用户 #82 是容器中最后一个可见项目：

• 添加具有可见性的虚拟用户 #83、#84 和 #85：隐藏。
• 或者，追加一个可见性为：hidden 且 flex-grow: 10 的虚拟项目，目标为 :last-child。

结果

这种方法会导致最后一行弹性项目自然地与其内容宽度对齐，从而消除了之前观察到的过度拉伸。容器的空间被有效填充，而不会牺牲所需的对齐行为。

以上是如何将最后一行中的 Flexbox 项目调整到其自然宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！