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

Posted 2023-03-05

【中文标题】带边距排水沟的 Flexbox 网格系统

【英文标题】：Flexbox Grid System w/Margin Gutters

【发布时间】：2017-12-20 18:36:32

【问题描述】：

我很想了解如何使用边距排水沟来布局 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 的装订线，但如果这有意义的话，拉伸行的整个宽度。如有任何问题，请告诉我，我很乐意详细说明。

【问题讨论】：

你愿意使用grid吗？ codepen.io/mcoker/pen/WOWQGP?editors=1100

我更喜欢使用 flexbox。支持似乎要好得多。

如果您对列使用固定边距，我认为让列填充行的唯一方法是使用flex-grow: 1，它不适用于换行的行，或者像你一样使用 calc() 。您愿意拥有多行吗？

如果这是唯一的方法，我想我必须是:)

问题是它没有拉伸它需要的整个宽度。

【参考方案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>

【参考方案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

【讨论】：

不得不添加更多标记来解决问题总是令人遗憾，但有时它确实让事情变得更容易！ （毫无疑问，单独使用 CSS 有更聪明的方法 - 希望其他人也能将其中一些带到桌面上 - 当我有更多时间并回来时，我可能不得不考虑它！）

我发现了一个问题。如果您查看第一个容器，它会比其他容器宽。

@jesders88 你是对的，这是由于第一列的padding-left: 0;。我删除了它（以便所有列都有相同的填充），并以与顶部相同的方式进行操作，并在行上简单地执行margin: -25px 0 0 -25px;。如果您刷新那支笔，您应该会看到它们现在的大小都相同。好收获！