我很想知道如何布置具有排水沟的柔性网格系统。具有边缘排水沟的Flexbox网格系统
例如：
在我的笔在下面我有display:flex行，我希望它来包装，所以我用flex-wrap:wrap。这一切都工作正常，但是当我为所有列设置25％的宽度时，我必须设置calc的最大宽度（25％ - 25px）。
https://codepen.io/Jesders88/pen/rwbVwP?editors=1100
我想什么是能够有一个保证金排水沟，而不必使用钙或最大，宽度，如果这是可能的。我也不想使用百分比，这样我就可以在每列上方有一个px单位的设置边距，并且当有一个装订线值时，我可以在左边设置边距。所以基本上我想要的是，如果我要设置一个25像素的排水沟，并将一行上的项目数设置为4，我希望那些在它们之间具有25像素的排水沟，但是如果有意义的话，则拉伸整行的宽度。任何问题只是让我知道，我会很乐意详细说明。
一个快速简便的方法可能是使用内部容器和填充...
这将使“沟”，由柱内的填充形成，这意味着每列可以跨越全希望的宽度为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％宽度的一部分，而不是除此之外。
不得不添加更多标记来解决问题总是令人惭愧，但有时它确实使事情变得更容易！ （毫无疑问，更聪明的方法是单独使用CSS来完成 - 希望别人也可以将其中的一部分带入桌面 - 稍后当我有更多时间再回来时，我可能不得不考虑它） –
我看到一个问题。如果你看第一个容器，那么其余部分就会更宽。 – jesders88
@ jesders88你是对的，这是由于第一列的'padding-left：0;'造成的。我删除了它（所有列都有相同的填充），并按照与顶部相同的方式进行，并在该行上简单地执行了“margin：-25px 0 0 -25px;”。如果刷新笔，则应该看到它们现在尺寸完全相同。接得好！ –
一种方法是使用多行和flex-grow: 1不要在:last-child
html, body {
\t height: 100%;
\t background: #252525;
margin: 0;
}
section {
}
.row {
\t display: flex;
}
.column {
\t flex: 1 0 0;
\t margin-top: 25px;
\t height: 200px;
\t background: #2848e6;
}
.column:not(:last-child) {
\t margin-right: 25px;
}<section>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
</section>使用权margin或者你可以使用margin-right: 15px除了:nth-child(4)和flex-basis的calc(25% - 11.25px)（45px保证金/ 4盒= 11.25）作为宽度。
html, body {
\t height: 100%;
\t background: #252525;
margin: 0;
}
section {
}
.row {
\t display: flex;
\t flex-wrap: wrap;
}
.column {
\t flex: 0 1 calc(25% - 11.25px);
\t margin-top: 25px;
\t height: 200px;
\t background: #2848e6;
}
.column:not(:nth-child(4n)) {
\t margin-right: 15px;
}<section>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
</section>您可以使用grid-column-gap和fr单位display: grid;做到这一点很容易。
html, body {
\t height: 100%;
\t background: #252525;
margin: 0;
}
section {
}
.row {
\t display: grid;
\t grid-template-columns: 1fr 1fr 1fr 1fr;
\t grid-column-gap: 25px;
\t grid-row-gap: 25px;
}
.column {
\t height: 200px;
\t background: #2848e6;
}<section>
\t <div class="row">
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t \t <div class="column"></div>
\t </div>
</section>
是您打开使用'grid'？ https://codepen.io/mcoker/pen/WOWQGP?editors=1100 –
我宁愿使用flexbox。支持似乎好得多。 – jesders88
如果您对列使用固定边距，我认为获得列填充行的唯一方法是使用'flex-grow：1'，这不适用于包装或使用的行calc（）就像你一样。你打算多行吗？ –