我正在使用 flexbox 和 Microsoft 的fluent ui “堆栈”抽象来在我的 React 应用程序的页面上显示视频卡。顾名思义，我正在使用flex-wrap并在每个项目之间保持相等的空间。space-between当页面上存在大量项目时，这看起来很完美。
但是，当您刚开始添加项目时，您要添加第二个项目，而不是将项目放在第一个视频卡的右侧 - 与页面左侧对齐 - 第二个项目放在行的最右边。然后第三个项目是 1 和 2 距离的一半——所以它被放置在行的正中间。
我的问题是，如何让第二个项目——然后是第三个，等等——放在前一个项目的右侧，直到该行已满，此时它换行到一个新行并且同样的事情再次发生？
这是我的代码：
<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>
换句话说，当我添加第二项时，我得到的是这样的：
...当我想要的是这样的东西时：
而且我猜测它需要在幕后工作的方式是，每个项目之间的空间是否需要根据你可以在一行中容纳的最大项目数来计算？
这是 flexbox 设计用来处理的场景吗？或者这比我意识到的更复杂？注意：如果还不是很明显，每个视频卡的尺寸将完全相同。所以，在我的用例中，我知道我可以在一行中放置 7 个视频卡，然后再换到下一行。我宁愿将一行中的项目放在一起，而不是最初放在行的两端。