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

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

工作演示