Question

我很想知道如何使用边缘排水沟布置flexbox网格系统。

例如：

在我的笔下面，我有一行display:flex，我想要它换行，所以我使用了flex-wrap:wrap。一切正常，但是当我为所有列设置25％的宽度时，我必须设置一个最大宽度（25％ - 25px）。

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

我想要的是能够有一个边缘装订线，如果可能的话，不必使用计算或最大宽度。我也不想使用百分比，这样我就可以在每列上方的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

Answer 2

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

您可以使用display: grid;和grid-column-gap单位fr轻松完成此操作。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

具有边距装订线的Flexbox网格系统

2 个答案: