带边距排水沟的 Flexbox 网格系统

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

一种方法是使用多行和flex-grow: 1，并且不要在:last-child 上使用右margin

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>

或者您可以在除:nth-child(4) 和calc(25% - 11.25px) 的flex-basis（45px 边距/4 个框 = 11.25）之外的所有位置上使用margin-right: 15px 作为宽度。

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>

Answer 2

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

这将允许通过列内部的填充形成“排水沟”，这意味着每列可以跨越所需的 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