jquery - CSS flexbox/jquery : Auto gutter size

Question

我正在尝试构建响应式网格列表。这些元素有固定的高度 (300px) 和宽度 (120px)。元素之间的间距应为自动，但最小尺寸为 20 像素。

这是我当前的 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;
}

我得到了这个结果:

Result

但它应该是这样的:

It should looks like this

有没有办法使用 CSS 和 jQuery 来实现它？

Answer 1

我不确定你是怎么得到 that 的，但是当我添加 3 个小的 CSS 属性(flex-wrap、justify-content 和 margin)时，我得到了 this .这就是您要找的吗？