你可以添加flex-basis，它设置内容框的大小，所以你的css类.react-card-flip上的flex-basis: 25%

• • 更新**

如果您不想增加空间，请尝试以下操作：

.react-card-flip:nth-child(3n+1):not(:first-child) {
  break-after: always;
}

这段代码只是简单地找到了你的第四个元素，并在上面添加了一个中断。2只是尝试减少你的页面使用ctrl+滚动你的鼠标看到。3它max 4卡每行。
在sandbox上试用

使用flex，并且由于您希望卡片的宽度是固定的（300px），并且假设您只在大屏幕上工作，为了保证在一行中显示4个300ps的元素，最好也将父元素的宽度设置为1500px，例如，在本例中，只有4个元素具有边距，填充将显示在一行中。

.container {
  display: flex;
  flex-wrap: wrap;
  width: 1500px;
  justify-content: center;
  margin: auto;
}

.react-card-flip {
  flex: 1 0 300px;
  border: 1px solid red;
  margin: 5px;
  min-height: 50px;
}

<div class="container">
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
  <div class="react-card-flip"></div>
</div>

尝试将此样式添加到您的style.css文件中，以便在空间上响应自动卡片 Package 。

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

.card {
  width: calc(25% - 40px);
  margin: 20px;
}

我以为问题是“水平不正确”。
在https://we6n9s.csb.app/中按“f12”，然后你会看到第一级是“容器”。
第二个层次是“React-翻牌”。
第三级是“React-翻牌”。
第四个层次是“React-卡片-正面”。
第5级是“卡”。
也许您可以使用.react-card-flip，但不能使用.card

.react-card-flip {
  position: flex;
  flex: 1 0 22%;
  border: 1px solid red;
  width: 22%;
  height: 300px;
  min-height: 50px;
}