CSS flexbox/jquery：自动调整边沟大小

我正在尝试建立一个响应性的网格列表。这些元素具有固定的高度（300px）和宽度（120px）。元素之间的空间应为自动，但最小大小为20px

这是我当前的CSS：

.folder-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100%;
    width: 100%;
}

.folder-list li {
    display: block;
    width: 300px;
    height: 120px;
    background: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

我得到了这个结果：

但它应该是这样的：

---

有没有一种方法可以使用CSS和jQuery使其成为现实？

我不确定您是如何得到的，但当我添加了3个小CSS属性（

flex wrap

、

justify content

和

margin

）时，我得到了。这就是你要找的吗？

谢谢！第二行应在左侧对齐。在您的版本中，其水平居中。@JonasLoerken删除“对齐内容”条目，它将对齐left@JonasLoerken它是。它只是将下一个项目包装到下一行b/c没有更多可用空间来容纳该元素。您还可以将宽度更改为100vw而不是100%，这样它将占用整个视口宽度