Question

我有一个弹性盒，里面有不确定数量的卡片。

.box {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 1 210px
}

我必须决定我的盒子里面放了多少张卡片，显示的卡片数量恰好足以填满两行。

===== is a card

---------------------
| ===== ===== ===== |
| ===== ===== ===== |
---------------------

这意味着，使用.box 630px，我会显示6张卡片。 (630 / 210) * 2 = 6

要计算每行的卡号，我正在使用此代码：

getCardsPerRow() {
  let listWidth = box.clientWidth

  // use flex-basis width to compute the initial number of cards per row
  let cardsNumber = Math.floor(listWidth / 210)

  // add to the cards width the left amount of available space (distributing it evenly)
  let cardWidth = Math.floor(listWidth / cardsNumber + listWidth % cardsNumber)

  // divide listWidth by the width of a single card to get the total
  return Math.floor(listWidth / cardWidth)
}

在大多数情况下效果很好。但是有一些宽度，我得到一个错误的数字。

例如，对于box宽1132px，我得到4，即使flexbox会放置一行5卡。

尝试其他方法，如果我计算了Math.floor(listWidth / 210)的卡号，我会得到一个错误的结果（例如）box宽1075px。
它应该返回4（根据flexbox CSS结果），但它返回5。

我做错了什么？

Answer 1

你的数学不正确，正如评论中指出的那样。让我们来看看它：

const listWidth = 1132;
const cardsNumber = Math.floor(listWidth / 210);

此时，cardsNumber为5（从5.3905开始）。显然，还有额外的空间。

const cardWidth = Math.floor(listWidth / cardsNumber + listWidth % cardsNumber);

这是出问题的地方。 listWidth / cardsNumber为1132 / 5或226.4。 listWidth % cardsNumber或1132 % 5为2。

这基本上保证您计算cardWidth值，该值等于（如果listWidth % cardsNumber为0）或稍大于可用宽度。请注意，对于1130，它将是相同的。

另一个问题是当事情变得弯曲时，这可能就是你添加这种错误会计的原因。 flex: 1 210px;意味着允许增长和缩小。

如果一个盒子变成250px怎么办？那么，250 + 210 * 4 = 1090，所以它仍然适合1132。

如果所有盒子变成250px会怎样？现在我们有1250，太大了。现在我们在第一行中只有4个。

如您所见，您需要知道框的最小和最大宽度才能正确计算。如果您确定它们在210px时都可以正常使用，那么只需使用cardsNumber并将flex-grow设置为0。

否则，您可以将下一个cardsNumber框的宽度相加，看看它是否小于listWidth。如果不是，则该行丢失了一张卡（可能是多张。）

另一种方法是一次一张地将卡片添加到盒子中，然后检查每张卡片的offsetTop。当它第二次增加时，你打破了第二行。删除最后添加的项目，你有两个整齐排列的行（尽可能整齐。）

使用JS

1 个答案: