使用CSS Flexbox的动态组件的类似于网格的行为

Question

我正在使用React，并且可以使用表单添加新项目。

                <div className="wrapper">
                    {
                        this.props.routers.map((item, idx) => {
                            return (
                                <Tag
                                    className='tag'
                                    key={idx}
                                    onRemove={() => this.deleteElem(idx)}>
                                        {`${username}@${addr}`}
                                </Tag>
                            )
                        })
                    }
                </div>

这是我的动态组件的一部分，随着我添加更多商品，它会呈现新标签。

我的风格如下：

.wrapper {
    display: flex;
}

.tag {
    margin: 1em 0.5em;
    background: #017cad;
}

有少量项目，

它工作正常，但是当我添加越来越多的项目时，

使用Flexbox，如何在一行中已满的情况下设置不超过包装器的项目并转到下一行？