Flexbox 网格系统 w/Margin Gutters

Question

我很想知道如何布局带有边距的 flexbox 网格系统。

例如：

在我下面的笔中，我有一排 ，display:flex我想把它包裹起来，所以我使用了flex-wrap:wrap. 一切正常，但是当我为所有列设置 25% 的宽度时，我必须设置 calc(25% - 25px) 的最大宽度。

https://codepen.io/Jesders88/pen/rwbVwP?editors=1100

我想要的是能够有一个边距，如果可能的话，不必使用 calc 或 max-widths。我也不想使用百分比，这样当有装订线值时，我可以在每列上方和左侧设置 px 单位的边距。所以基本上我想要的是，如果我将一个 25px 的间距和一行上的项目数设置为 4，我希望它们之间有 25px 的间距，但如果有意义的话，可以拉伸行的整个宽度。任何问题都可以让我知道，我很乐意详细说明。

Answer 1

一种快速简单的方法可能是使用内容器和填充物......

这将允许通过列内部的填充形成“装订线”，这意味着每列可以跨越所需的完整 25% 宽度。然后，内部内容容器最终将成为您设置的样式，以显示为实际的列本身。

因此，您可以将列的所有标记更改为：

<div class="column">
    <div class="content"></div>
</div>

你的 CSS 是这样的：

* {
    box-sizing: border-box;
}
.column {
    flex-grow:1;
    flex-shrink:1;
    width:25%;
    padding-left:25px;
    padding-top:25px;
}
.content {
    background:#2848e6;
    height:200px;
}

请注意，添加box-sizing: border-box;它将使填充成为 25% 宽度的一部分，而不是除此之外。

例如： https: //codepen.io/anon/pen/EXJVZy? editors=1100