javascript - 如何在 flexbox 和网格布局的 javascript 中获取行数和列数？

Question

像这样的 flex 盒子:

display: flex;
flex-flow: row wrap;

和这样的网格:

display: grid;
grid-template-columns: repeat(auto-fill, 20px);

动态排列元素，行数和列数不固定。

我不确定这是一两个问题，因为 flexbox 和 grid 可能有不同的解决方案。无论如何，现在我会问一下。

如何获取行数和列数？并进一步逐项获取行索引和列索引？

参见 https://jsfiddle.net/w2L8oumw/16/举个例子。拖动边框使结果窗口的宽度发生变化，从而使行数和列数也发生变化。

我的想法是迭代所有元素并根据它们的位置确定它们的行索引和列索引，在初始化、元素更改和调整大小时。

Answer 1

问题有点老了，但万一有人需要这个:

如果您使用的是 CSS-Grid，则不需要那么多计算。您可以获得当前的模板设置，例如与

getComputedStyle(container).getPropertyValue("grid-template-rows")

在现代浏览器中，这会返回实际值，而不是来自您的 css 的值，因此您会得到类似这样的字符串

250px 250px 250px

然后，您可以通过拆分字符串并计算结果数组中的元素来计算当前行数。

这可能也适用于较旧的 IE，我没有测试过。