使用 flexbox 在两条相等的行中显示数组

Question

因此，目前我正在尝试在每个分辨率（或大多数分辨率）下以两行相等的方式显示数组，代码结构只是 a.map 在返回外部组件的 div 中

<div className={usw(styles, ['listGamesBox'], ['d-flex', 'container'])}>
              {games.map((i) =>
                <Card category={i.category} cantLvls={i.cantLvls} imgCard={i.imgCard} key={i.id} info={showRightPanel} id={i.id} />
              )}
</div>

它应该是什么样子，至少直到移动断点

我虽然可能制作两个单独的 arrays，包括原始的一半，每个映射那些。

然而，它在响应时给我带来了问题，虽然我可能必须用媒体查询填充我的 scss 以调整每个断点处的卡片大小和空间，因此它总是看起来像 4/4 显示而不是 5/3或 3/3/2 但很难相信这就是解决方案。

Answer 1

您可以使用 css 网格来实现此目的。

.container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(auto-fill, 120px);
  grid-row-gap: 0.5em;
  grid-column-gap: 1em;
}

 <div className="container">
      {games.map((_, i) => (
        <div key={i}>{i}</div>
      ))}
  </div>

Answer 2

flex css 可以帮忙，但我不知道你想要什么？ 一排四排，或者只有两排。

1. 一排四个

.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis: 25%;
}

2. 只有两行（需要调整顺序）

.box {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.item {
  flex-basis: 50%;
}

 <div className="box">
      {games.map((_, i) => (
        <div key={i} className="item">{i}</div>
      ))}
  </div>