如何获得弹性项目中auto值可能的最大值？

Question

如果有一个弹性项目设置了这样的弹性框值

flex: 1 0 220px;

我可以通过javascript获取其尺寸（宽度，高度），当值变为

flex: 1 0 auto;

时将应用于它吗？

获取这些尺寸的唯一方法是先将

flex: 1 0 auto;

设置为项目，然后再调用所需的 javascript api 方法吗？

我的问题是（平滑地）将 Flex 项目的宽度值从固定

220px

切换到其中的最大

auto

。但是，我不知道如何在实际设置

auto

之前获得这个最大值。

Answer 1

您已在简写中将

flex-grow

设置为

1

。这意味着当 Flex-basis 为

auto

时，所有 Flex-Item 必须均等地划分它们之间的可用宽度。

您可以使用这个JS方法来获取flex-container的尺寸（宽度和高度）。然后，您可以使用

flex-container

上的 childElementCount 属性以编程方式获取弹性项目的数量。最后，如果将检索到的 Flex 容器的宽度除以其直接子元素（Flex-items）的数量，您将获得设置

flex: 1 0 auto

时每个 Flex-item 可以占据的最大宽度。