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

Question

像这样的 flexbox：

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，我没有测试它。

Answer 2

下面给出了一个用于计算列的示例解决方案flexbox，对于row，grid您必须对行进行类似的计算。

您可能需要添加或删除一些计算。

var getComputedValue = function (container, cssProp) {
   return parseInt(window.getComputedStyle(container, null).getPropertyValue(cssProp).split('px')[0]);
};

var calcColms = function() {
  var container = document.getElementById("flexbox");

  var parentWidth = getComputedValue(container,"width");
  var parentPaddingLeft = getComputedValue(container,"padding-left");
  var parentPaddingRight = getComputedValue(container,"padding-Right");

  var child = container.firstElementChild;
  var childWidth =  getComputedValue(child,"width");
  var childMarginLeft = getComputedValue(child,"margin-left");
  var childMarginRight = getComputedValue(child,"margin-right");

  var parentWidthNoPadding = parentWidth - parentPaddingLeft - parentPaddingRight;

  var childWidthWithMargin = childWidth + childMarginLeft + childMarginRight;
  parentWidthNoPadding = parentWidthNoPadding + childMarginLeft + childMarginRight;
  var noCols = parseInt(parentWidthNoPadding / childWidthWithMargin);
  console.log(noCols);
}

window.onload = function () {
  calcColms();
};

window.onresize = function () {
  calcColms();
};

#flexbox{
  display:flex;
  flex-flow: row wrap;
  height:30vh;
  width:30vw;
  background:black;
  padding:5px;
  margin:5px;
}

#flexbox > div{
  height:40px;
  width:40px;
  background:purple;
  margin:5px;
}

#grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, 40px);
  grid-gap: 10px;
  height:30vh;
  width:30vw;
  background:black;
  padding:5px;
  margin:5px;
}

#grid > div{
  height:40px;
  /*width:40px;*/
  background:purple;
}

<div id="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>