根据#ChromeDevSummit的说法，在Firefox和基于chrome的浏览器中，Flexbox有一个gap属性的实现。

这是一个现场演示

你可以利用新的房产缺口。我复制粘贴了我在本文中找到的解释，以及更多的信息

CSS的网格布局有差距(以前的网格差距)有一段时间了。通过指定包含元素的内部间距而不是子元素周围的间距，gap解决了许多常见的布局问题。例如，使用gap，你不必担心子元素的边距会在包含元素的边缘造成不必要的空白:

不幸的是，目前只有FireFox支持flex布局中的gap。

@use postcss-preset-env { 阶段:0; 浏览器:最近2个版本 ｝ 节{ 宽度:30大众; 显示:网格; 差距:1快速眼动; Grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr)); & (flex) { 显示:flex; flex-wrap:包装; ｝ margin-bottom: 3快速眼动; ｝ .tag { 颜色:白色; 背景:hsl(265 100% 47%); 填充:.5rem 1rem; border - radius: 1快速眼动; ｝ 按钮{ 显示:inline-flex; 名:中心; 差距:.5rem; 背景:hsl(265 100% 47%); 边框:1px固体hsl(265 100% 67%); 颜色:白色; 填充:1rem 2rem; border - radius: 1快速眼动; 字体大小:1.25快速眼动; ｝ 身体{ 最小高度:100 vh; 显示:flex; flex-direction:列; justify-content:中心; 对齐项目:中心; ｝ < >节 <标题> < / h1 >网格 < div class = "标签" >的< / div > < div class = "标签" >首席运营官< / div > < div class = "标签" > Rad < / div > < div class = "标签" > < / div >数学 < / >节 < br > < flex节> <标题> Flex h1 > < / < div class = "标签" >的< / div > < div class = "标签" >首席运营官< / div > < div class = "标签" > Rad < / div > < div class = "标签" > < / div >数学 < / >节

比如说，如果你想在项目之间设置10px的空间，你可以为所有项目设置。item {margin-right:10px;}，并在最后一个项目上重置它。item:last-child {margin-right:0;}

你也可以使用一般的sibling ~或next + sibling选择器来设置除第一个项目之外的项目的左距。item ~ .item {margin-left:10px;}或使用.item:not(:last-child) {margin-right: 10px;}

Flexbox非常聪明，它可以自动重新计算并平均分配网格。

身体{ 保证金:0; ｝ .container { 显示:flex; ｝ .item { flex: 1; 背景:灰色; 高度:50 px; ｝ .item:没有(胎){ margin-right: 10 px; ｝ < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >

如果要允许使用弹性包装，请参见下面的示例。

身体{ 保证金:0; ｝ .container { 显示:flex; flex-wrap:包装; margin-left: -10 px; ｝ .item { Flex: 0 0 calc(50% - 10px); 背景:灰色; 高度:50 px; Margin: 0 0 10px 10px; ｝ < div class = "容器" > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < div class = "项目" > < / div > < / div >

我已将此方法用于包装和固定宽度的列。这里的关键是calc()

SCSS样本

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

完整的Codepen样本

我发布了我的flexbox方法 在这里:

我拒绝的一个想法是去掉外部列的填充物，就像这样:

div:nth-child(#{$col-number}n+1) { padding-left: 0; }
div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }

但是，像这里的其他海报一样，我更喜欢负边距技巧。我的小提琴也有响应任何人正在寻找一个基于sass的解决方案。我基本上使用这种方法来代替网格。

https://jsfiddle.net/x3jvfrg1/

我只在伸缩项目的容器建立的方向上设置间距。 例如，如果一个flex容器被设置为从左向右流动(flex-direction:row)，我将只在它的子容器上设置右边缘，除了最后一个:

.flex-lr{
    display:flex;
    flex-direction:row;
}

.flex-lr > *:not(:last-child){
    margin-right:5px;
}

乍一看，这似乎是可行的，但等等!当justify-content被设置为开始或结束值时，不应该这样做，因为所有其他值已经自己分布空间了。

如果包裹好了呢?然后，我们应该在适当的交叉轴侧加上空间。但是，如何知道容器是否允许其子容器进行包装呢?那么换行-反转呢?

所有这些考虑让我觉得这不是一件小事，需要再往前迈一小步。

我的方法基于构建一组简短的类，这些类充当flexbox的包装器。这有一些好处:

它允许将所有供应商前缀“集中”在一个点上，并忘记这一点。 它允许将flexbox属性分组到单个类中，甚至可以重命名flexbox使用的一些措辞，这有时可能看起来不太直观(恕我直言)。 如果我使用这些类，我将能够根据它们所依赖的flex属性值编写其他类。例如，我将能够根据流动方向，交叉轴对齐，包装等设置间距。

我最终创建了一个flexbox设计器来处理所有这些问题，以帮助我自己(和其他人)了解flexbox是如何工作的，并意识到flexbox是多么棒。 请随意使用下面的链接:

http://algid.com/Flex-Designer

因此，下面你会发现我使用的类的抽象和一个流方向的间距(边缘)实用程序。你可以从上面提供的链接中推断出其他的或找到它们。为简洁起见，省略了供应商前缀。

/* Flex container definition */
.flex-lr{display:flex; flex-direction:row;}
.flex-tb{display:flex; flex-direction:column;}
.flex-rl{display:flex; flex-direction:row-reverse;}
.flex-bt{display:flex; flex-direction:column-reverse;}

/* Wrapping */
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.wrap-rev{flex-wrap:wrap-reverse;}

/* Main axis alignment */
.align-start{justify-content:flex-start;}
.align-end{justify-content:flex-end;}
.align-center{justify-content:center;}
.align-between{justify-content:space-between;}
.align-around{justify-content:space-around;}
.align-evenly{justify-content:space-evenly;}

/* Cross axis alignment */
.cross-align-start{align-items:flex-start;}
.cross-align-end{align-items:flex-end;}
.cross-align-center{align-items:center;}
.cross-align-stretch{align-items:stretch;}
.cross-align-baseline{align-items:baseline;}

/* Cross axis alignment when content is wrapped */
.wrap-align-start{align-content:flex-start;}
.wrap-align-end{align-content:flex-end;}
.wrap-align-center{align-content:center;}
.wrap-align-stretch{align-content:stretch;}
.wrap-align-between{align-content:space-between;}
.wrap-align-around{align-content:space-around;}

/* Item alignment */
.item-cross-align-start{align-self:flex-start;}
.item-cross-align-end{align-self:flex-end;}
.item-cross-align-center{align-self:center;}
.item-cross-align-stretch{align-self:stretch;}
.item-cross-align-baseline{align-self:baseline;}
.item-cross-align-auto{align-self:auto;}

现在是把我们带到这里的东西:项目之间的空间:

/* Flow margin (left to right) */
.flex-lr.fm-0 > *:not(:last-child){margin-right:0;}
.flex-lr.fm-1 > *:not(:last-child){margin-right:3px;}
.flex-lr.fm-2 > *:not(:last-child){margin-right:7px;}
.flex-lr.fm-3 > *:not(:last-child){margin-right:15px;}
.flex-lr.fm-4 > *:not(:last-child){margin-right:32px;}

/* Cross axis */
.flex-lr.wrap.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-bottom:0;}
.flex-lr.wrap.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-bottom:3px;}
.flex-lr.wrap.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-bottom:7px;}
.flex-lr.wrap.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-bottom:15px;}
.flex-lr.wrap.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-bottom:32px;}

/* wrap reverse */
.flex-lr.wrap-rev.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-top:0;}
.flex-lr.wrap-rev.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-top:3px;}
.flex-lr.wrap-rev.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-top:7px;}
.flex-lr.wrap-rev.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-top:15px;}
.flex-lr.wrap-rev.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-top:32px;}

最后，这是标记的样子:

<div class="flex-lr cross-align-center fm-3">
    <div>
        Some content here...
    </div>
    <div>
        A bit more stuff here...
    </div>
    <div class="flex-tb fm-3">
        <div>
            Now vertical content
        </div>
        <div>
            etc.
        </div>
    </div>
</div>

这就是我大声说出来的代码。