flexbox 中单行中的项目数

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 用于移动设备等）。这种媒体查询使这个解决方案有点混乱（但是，这个解决方案在所有项目具有相同宽度的情况下有效）。

但是有没有更清洁的方法来做同样的事情？ （如果每个项目都有自己的自定义宽度怎么办？！）

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

目前，我正在处理我的startpage。我想改进键盘导航。这是它的问题：当我按下向下箭头时，我想将当前瓷砖下方的瓷砖标记为活动。获取此“下方”图块是手头的问题。

在keys.js 的第 389 行，我有 -4，它适用于桌面屏幕，但对于移动屏幕和其他不同的视口，此值需要更改为 -2。

Answer 1

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