react-beautiful-dnd - 如果存在超过 4 个列表，则在下一行添加列表

Question

我正在使用 react-beautiful-dnd 将团队成员拖放到不同的团队列表中。我有多个团队列表，以及一个添加新团队列表的按钮。添加4个团队后，我希望第5个团队列表在第二行。

这可能吗？如果是这样，如何？目前，它是水平延伸的。重新排序不同行的列表不是优先事项，但是，我希望能够将团队成员拖放到不同行的团队列表中。

这是代码框： https://codesandbox.io/s/teamlist-priwp?fontsize=14&hidenavigation=1&theme=dark

Answer 1

我在 css 中做了 2 处更改，您可以使用 flex-wrap:

//App.js
const Container = styled.div`
  display: flex;
  flex-wrap: wrap; // <---- added
`;


//Team.js
// removed other flex properties from below
const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
  width: 220px;
  background-color: white;
`;

工作演示