通过 flexbox/fluent ui 控制项目如何排成一行

Question

我正在使用 flexbox 和 Microsoft 的 fluent ui 它的“堆栈”抽象来在我的 React 应用程序的页面上显示视频卡。顾名思义，我使用 flex-wrap 和 space-between 使每个项目之间的 space 保持相等。当页面上存在大量项目时，这看起来很完美。

但是，当您刚开始添加项目时，您要添加第二个项目，而不是将项目放在第一个视频卡的右侧 - 它与page - 第二个项目被放在行的最右边。然后第 3 个项目是 1 和 2 距离的一半——所以它被放置在行的正中间。

我的问题是，如何让第 2 项——然后是第 3 项，依此类推——放在前一项的右侧，直到该行已满，此时它换行到一个新的行，同样的事情又发生了？

这是我的代码：

<Stack
  horizontal 
  styles={{
   root: {
    'flex-wrap': 'wrap',
    'justify-content': 'space-between'
   }
  }}>
  {this.showNewVideoCard()}
  {this.state.videos.map((video, index) => (
    <div key={index}>
      <VideoCardForm key={video.id}
       ... more code
      /> 
    </div>
  ))}
</Stack>

换句话说，当我添加第二项时，我得到的是这样的：

...当我想要的是这样的：

而且我猜它需要在幕后工作的方式是，每个项目之间的 space 需要根据您可以放入一个项目的最大数量来计算排？

Flexbox 是为处理这种情况而设计的吗？或者这比我意识到的更复杂？注意：如果不是很明显，每张视频卡的尺寸将完全相同。因此，在我的用例中，我知道我可以连续放置 7 个视频卡，然后再换行到下一行。我只是宁愿一行中的项目并排放置，而不是最初放在行的两端。

Answer 1

我认为您的问题是您使用了 justify-content: space-between，而您应该使用 justify-content: flex-start 并为每个项目留出边距。由于 flex-start 是 justify-content 的默认值，您可以一起删除该行。

通过 flexbox/fluent ui 控制项目如何排成一行

Controlling how items are placed in a row via flexbox/fluent ui

reactjs

flexbox

fluent-ui