Question

我有一个Flexbox容器，其中装有多个物品。他们被包裹起来了。有没有一种使用JavaScript的方法来获取每一行中的项目数？（换句话说，包装的断点是什么？）

例如-

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-flow: row wrap;
}

现在，第一行中可能有1或2或3 ...或全部6 items。有什么办法，我可以找出第一行和后续行中有多少items？

一个可能的解决方案是：如果我要固定items的宽度，那么我可以用screen_width/width_of_item得到该数字。但是目前，我根据视口改变了items的大小（例如对于台式机来说是400px，对于移动设备来说是600px）。这种媒体查询使该解决方案有些混乱（但是，如果所有项目的宽度相同，该解决方案仍然可以工作）。

但是，有没有更清洁的方法呢？（如果每个项目都有自己的自定义宽度呢？！）

编辑：为什么我要查找此信息？

当前，我正在研究https://ibb.co/D9rxnD8。我想改善键盘导航。这是它的问题：当我按下向下箭头时，我想将当前图块下方的图块标记为活动的。将这个“下面”的图块放在下面是当前的问题。

在keys.js的第389行中，我有-4，它适用于台式机屏幕，但是对于移动屏幕和其他不同视口，该值需要更改为-2。 / p>

Answer 1

您可以使用window.getComputedStyle(item)来获取每个项目的宽度。然后轻松计算screen_width / width_of_item。

Flexbox中单行中的项目数

1 个答案: