Flexbox的网格系统W /保证金排水沟

Question

我很想得到关于如何布置一个Flexbox的网格系统余量排水沟的想法。

例如：

在我的笔在下面我有display:flex行，我希望它来包装，所以我用flex-wrap:wrap。这一切工作正常，但是当我设定的25％的宽度所有列的我有设置一个计算的最大宽度（25％ - 25像素）。

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

我想是能够有一个保证金排水沟，而不必使用钙或最大，宽度，如果这是可能的。我也不想使用百分比，这样我可以在上面每一列和左像素单位设置的空白时，有一个排水沟值。所以基本上我想要的是如果我要设置一个25像素排水沟和项目的某行至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

Answer 2

一种方法是使用多行和flex-grow: 1不要在margin使用权:last-child

html, body {
	height: 100%;
	background: #252525;
  margin: 0;
}

section {
}

.row {
	display: flex;
}

.column {
	flex: 1 0 0;
	margin-top: 25px;
	height: 200px;
	background: #2848e6;
}
.column:not(:last-child) {
	margin-right: 25px;
}

<section>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
</section>

或者你也可以在所有，但margin-right: 15px和:nth-child(4)的flex-basis（保证金/ 4盒×45像素= 11.25）的宽度用calc(25% - 11.25px)。

html, body {
	height: 100%;
	background: #252525;
  margin: 0;
}

section {
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.column {
	flex: 0 1 calc(25% - 11.25px);
	margin-top: 25px;
	height: 200px;
	background: #2848e6;
}

.column:not(:nth-child(4n)) {
	margin-right: 15px;
}

<section>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
</section>

您可以使用display: grid;和grid-column-gap单位fr做到这一点很容易。

html, body {
	height: 100%;
	background: #252525;
  margin: 0;
}

section {
}

.row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 25px;
	grid-row-gap: 25px;
}

.column {
	height: 200px;
	background: #2848e6;
}

<section>
	<div class="row">
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
		<div class="column"></div>
	</div>
</section>