CSS flexbox / jquery：自动装订线大小答案

【问题标题】：CSS flexbox / jquery: Auto gutter sizeCSS flexbox / jquery：自动装订线大小
【发布时间】：2017-08-06 21:25:41
【问题描述】：

我正在尝试构建一个响应式网格列表。元素有固定的高度（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 来实现它？

【问题讨论】：

标签： jquery css grid flexbox

【解决方案1】：

我不知道你是怎么得到that的，但是当我添加3个小的CSS属性（flex-wrap、justify-content和margin）时，我得到了this。这就是你要找的东西吗？

【讨论】：

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