如何用Flexbox实现数组元素均分两行响应式布局？

我需要让数组渲染的Card组件在多数分辨率下均分为两行显示，现有代码如下：

<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>

期望实现卡片均分为两行的布局，且至少在移动端断点前保持每行数量一致的均分效果。

我试过两种方案，但都存在问题：

• 将原数组拆分为两个各含一半元素的子数组分别渲染，响应式适配出现问题
• 考虑用媒体查询调整卡片尺寸和间距，避免出现5/3、3/3/2这类不均分情况，但觉得这并非最优解。

内容的提问来源于stack exchange，提问作者Epileptic_Experience