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

像这样的flexbox:

display: flex;
flex-flow: row wrap;

和网格是这样的:

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

动态排列项目，并且行和列的计数不是固定的。

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

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

以https://jsfiddle.net/w2L8oumw/16/为例。拖动框架边框以使结果窗口的宽度改变，从而行数和列数也改变。

我的想法是对所有项目进行迭代，并根据其位置在初始化，项目更改和调整大小时确定其行索引和列索引。

最佳答案

以下是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>

关于javascript - 如何获取JavaScript在Flexbox和网格布局中的行数和列数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49506393/