您可以使用 & > * + * 作为选择器来模拟 flex-gap（对于单行）：

#box { 显示：弹性；宽度：230px；轮廓：1px 纯蓝色； } .item { 背景：灰色；宽度：50px；高度：100px； } /* ----- Flexbox 间隙： ----- */ #box > * + * { margin-left: 10px; }

如果你需要支持 flex wrapping，你可以使用一个 wrapper 元素：

.flex { 显示：弹性；弹性包装：换行； } .box { 背景：灰色；高度：100px；最小宽度：100px；弹性：自动； } .flex-wrapper {outline: 1px 纯红色； } /* ----- 弹性间隙 10px: ----- */ .flex > * { margin: 5px; } .flex { 边距：-5px; } .flex-wrapper { 宽度：400px; /* 可选 */ 溢出：隐藏； /* 可选 */ }

---

您可以使用透明边框。

我在尝试构建一个可以回退到旧浏览器的表格 + 表格单元模型的弹性网格模型时考虑了这个问题。在我看来，列装订线的边框是最合适的选择。即表格单元没有边距。

例如

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

另请注意，flexbox 需要 min-width: 50px;。 flex 模型不会处理固定大小，除非您对希望固定的特定子元素执行 flex: none;，因此将其排除在 "flexi" 之外。 http://jsfiddle.net/GLpUp/4/ 但所有列连同 flex:none; 不再是弹性模型。这是更接近 flex 模型的东西：http://jsfiddle.net/GLpUp/5/

因此，如果您不需要旧浏览器的表格单元回退，您实际上可以正常使用边距。 http://jsfiddle.net/GLpUp/3/

使用背景时需要设置 background-clip: padding-box;，否则背景会流入透明边框区域。

---

即使有多行或任意数量的元素，此解决方案也适用于所有情况。但是该部分的计数应该与您想要的第一行中的 4 和第二行中的 3 相同，这样第四个内容的空间将是空白的，容器不会填充。

我们正在使用 display: grid; 及其属性。

#box { 显示：网格；宽度：100px；网格间隙：5px； /* 项目之间的空间 */ grid-template-columns: repeat(4,1fr); /* 决定列数(4) 和大小(1fr | 1 Fraction | 你也可以使用像素和其他值) */ } .item { background: gray;宽度：100%； /* 宽度不是必需的，仅添加这个是为了理解宽度作为网格模板分配空间的 100% **默认宽度将是 100%** */ 高度：50px; }

此方法的缺点是在 Mobile Opera Mini 中不支持，在 PC 中只能在 IE10 之后使用。

Note for complete browser compatability including IE11 please use Autoprefixer

旧答案不要将其视为旧解决方案，如果您只想要单行元素并且它适用于所有浏览器，它仍然是最好的解决方案之一。

此方法用于 CSS 兄弟组合，因此您也可以通过许多其他方式对其进行操作，但如果您的组合错误，也可能会导致问题。

.item+.item{
  margin-left: 5px;
}

下面的代码可以解决问题。在这种方法中，不需要将 margin: 0 -5px; 赋予 #box 包装器。

适合您的工作样本：

#box { 显示：弹性；宽度：100px； } .item { 背景：灰色；宽度：22px；高度：50px； } .item+.item{ 左边距：5px; }

---

假设如果您想在项目之间设置 10px 空间，您可以为所有项目设置 .item {margin-right:10px;}，然后将其重置为最后一个 .item:last-child {margin-right:0;}

您还可以使用通用兄弟 ~ 或下一个 + 兄弟选择器来设置除第一个 .item ~ .item {margin-left:10px;} 之外的项目的左边距或使用 .item:not(:last-child) {margin-right: 10px;}

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

身体{边距：0； } .container { 显示：弹性； } .item { 弹性：1；背景：灰色；高度：50px； } .item:not(:last-child) { margin-right: 10px; }

如果要允许 flex wrap，请参见以下示例。

身体{边距：0； } .container { 显示：弹性；弹性包装：换行；左边距：-10px； } .item { 弹性：0 0 计算（50% - 10px）；背景：灰色；高度：50px；边距：0 0 10px 10px； }

---

更新：现在所有现代浏览器（Edge/Chrome/Opera/Samsung Internet/Safari/Firefox）都支持 flexbox 的 gap

最终他们会将 gap 属性添加到 flexbox。在此之前，您可以使用已经具有 gap 属性的 CSS 网格，并且只有一行。比处理利润要好。

---

我找到了一个基于通用兄弟选择器 ~ 的解决方案，并允许无限嵌套。

See this code pen for a working example

基本上，在列容器内部，每个在另一个子元素之前的子元素都会获得上边距。同样，在每个行容器内，每个在另一个之前的子元素都有一个左边距。

.box { 显示：弹性；弹性增长：1；弹性收缩：1； } .box.columns { 弹性方向：行； } .box.columns>.box~.box { margin-left: 5px; } .box.rows { 弹性方向：列； } .box.rows>.box~.box { margin-top: 5px; }

---

根据 #ChromeDevSummit，在 Firefox and Chromium-based browsers 中实现了 Flexbox 的 gap 属性。

这是Live Demo

---

从sawa的回答继续，这里有一个稍微改进的版本，它允许您在项目之间设置一个固定的间距，而没有周围的边距。

http://jsfiddle.net/chris00/s52wmgtq/49/

还包括 Safari “-webkit-flex” 版本。

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </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});}

}

Full Codepen sample

---

具有 -x（负）边距的弹性容器和具有 x（正）边距或填充的弹性项目都会导致所需的视觉结果：弹性项目之间只有 2x 的固定间隙。

无论是在弹性项目上使用边距还是填充，这似乎只是一个偏好问题。

在这个例子中，弹性项目被动态缩放以保持固定间隙：

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

---

在我的解决方案中使用 Flexbox 我已将 justify-content 属性用于父元素（容器），并在项目的 flex-basis 属性内指定了边距。检查下面的代码片段：

.container { 显示：弹性； flex-flow：换行； justify-content：空间环绕；边距底部：10px； } .item { 高度：50px;显示：弯曲；证明内容：中心；对齐项目：居中；背景颜色：#999； } .item-1-4 { 弹性基础：计算（25% - 10px）； } .item-1-3 { 弹性基础：计算（33.33333% - 10px）； } .item-1-2 { 弹性基础：计算（50% - 10px）； }

---

使用 flexbox，创建排水沟是一件很痛苦的事情，尤其是在涉及包装时。

您需要使用负边距 (as shown in the question)：

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

...或更改 HTML (as shown in another answer)：

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... 或者是其他东西。

在任何情况下，您都需要一个丑陋的 hack 来使其工作，因为 flexbox 不提供“flex-gap”功能（at least for now）。

然而，使用 CSS 网格布局，排水沟的问题很简单。

Grid 规范提供了在网格项目之间创建空间的属性，同时忽略了项目和容器之间的空间。这些属性是：

网格列间隙

网格行间隙

grid-gap（上述两个属性的简写）

最近，该规范已更新为符合 CSS Box Alignment Module，它提供了一组对齐属性供所有盒子模型使用。所以现在的属性是：

柱间隙

行间隙

间隙（速记）

但是，并非所有 Grid-supporting browsers 都支持较新的属性，因此我将在下面的演示中使用原始版本。

此外，如果项目和容器之间需要间距，则容器上的 padding 可以正常工作（参见下面演示中的第三个示例）。

从规范：

10.1。间距：row-gap、column-gap 和 gap 属性 row-gap 和 column-gap 属性（以及它们的 gap 简写），当在网格容器上指定时，定义网格行和网格列之间的间距。它们的语法在 CSS Box Alignment 3 §8 Gaps Between Boxes 中定义。这些属性的效果就像受影响的网格线获得了粗细：两条网格线之间的网格轨迹是代表它们的排水沟之间的空间。

.box { 显示：内联网格；网格自动行：50px；网格模板列：重复（4、50px）；边框：1px纯黑色； } .one { 网格列间隙：5px； } .two { 网格列间隙：10px;网格行间隙：10px； } .three { 网格间隙：10px;填充：10px； } .item { 背景：浅灰色； }

---

---

更多信息：

浏览器对 CSS 网格的支持

更容易定义仅适用于弹性项目之间的边距（讨论）

弹性盒项目之间的间距

---

为什么不这样做：

.item + .item {
    margin-left: 5px;
}

这使用 adjacent sibling selector 来赋予所有 .item 元素，但第一个元素除外 margin-left。多亏了 flexbox，这甚至可以产生同样宽的元素。当然，这也可以使用垂直定位的元素和 margin-top 来完成。

---

这是我的解决方案，不需要在子元素上设置任何类：

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

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

用法：

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

除了上面给出的内联示例之外，同样的技术可以用于普通的 flex 行和列，并且可以使用 4px 以外的间距类进行扩展。

---

我经常在这种情况下使用 + 运算符

#box { 显示：弹性；宽度：100px； } .item { 背景：灰色；宽度：50px；高度：50px； } .item + .item { margin-left: 5px; }

---

我发现最简单的方法是使用百分比，只允许边距计算你的宽度

这意味着如果您使用示例，您最终会得到类似的结果

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

确实意味着您的值是基于宽度的，尽管这可能对每个人都不利。

---

您可以使用新属性 gap。我复制粘贴我在此 article 中找到的说明以及更多信息

CSS 网格布局已经有一段时间了。通过指定包含元素的内部间距而不是子元素周围的间距，gap 解决了许多常见的布局问题。例如，使用间隙，您不必担心子元素的边距会导致包含元素的边缘周围出现不需要的空白：

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

@使用 postcss-preset-env { 阶段：0；浏览器：最近 2 个版本 } 部分 { 宽度：30vw;显示：网格；间隙：1rem；网格模板列：重复（自动调整，最小最大（12ch，1fr））； &[弹性] { 显示：弹性；弹性包装：换行；边距底部：3rem； } .tag { 颜色：白色；背景：HSL（265 100% 47%）；填充：0.5rem 1rem；边界半径：1rem； } 按钮 { 显示：内联弹性；放置项目：中心；间隙：0.5rem；背景：HSL（265 100% 47%）；边框：1px 实心 hsl(265 100% 67%);白颜色;填充：1rem 2rem；边界半径：1rem；字体大小：1.25rem； } 身体 { 最小高度：100vh;显示：弯曲；弹性方向：列；证明内容：中心；对齐项目：居中； }

Grid

Awesome

Coo

Rad

数学

Flex

Awesome

Coo

Rad

数学

---

这是一个使用灵活框完成间距的卡片 UI 元素网格：

https://i.stack.imgur.com/7km7e.png

我对通过操纵填充和边距来手动间隔卡片而感到沮丧，但结果并不好。下面是我发现非常有效的 CSS 属性组合：

.card-container { 宽度：100%;高度：900px；溢出-y：滚动；最大宽度：继承；背景颜色：#ffffff； /*这里是相关的 flexbox 的东西*/ display: flex;弹性方向：行；证明内容：中心；对齐项目：弹性开始；弹性包装：换行； } /*.card 元素的补充样式*/ .card { width: 120px;高度：120px；背景颜色：#ffeb3b；边框半径：3px；边距：20px 10px 20px 10px； }

希望这对现在和未来的人们有所帮助。

---

Columnify - N 列的独奏课程

Flexbox 和 SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

弹性盒和 CSS

.columnify { 显示：弹性； } .columnify > * { flex: 1; } .columnify > *:not(:first-child) { margin-left: 2rem; }

在 JSFiddle 上玩它。

---

#box { 显示：弹性；宽度：100px； } .item { 背景：灰色；宽度：50px；高度：50px； } /* 你的意思是实用程序 */ .u-gap-10 > *:not(:last-child) { margin-right: 10px; }

---

只需在选择器中使用 .item + .item 即可匹配第二个 .item

#box { display: inline-flex;边距：0 -5px； } .item { 背景：灰色；宽度：10px；高度：50px； } #box .item + .item { margin-left: 10px; }

---

我发现了一个黑客，因为我真的需要这个我自己。

/* 网格 */ .container { display: flex; flex-flow：换行； justify-content: 之间的空格； } .container::after, /* 这确保奇数元素离开而不是空格 */ .item { content:"";宽度：计算（33.3333% - 20px）；边距底部：40px； } /* 额外的样式 - 不重要 */ .item { height: 100px;背景：#787878； }

这是一个带有很好的弹性增长类别的帖子网格。我想你会喜欢的。 See Codepen

---

假设：

你想要 4 列网格布局与包装

项数不一定是4的倍数

为除第 1、5、9 项以外的每一项设置左边距；并在每个项目上设置固定宽度。如果左边距为 10px，那么每行将在 4 个项目之间有 30px 的边距，项目的百分比宽度可以计算如下：

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

对于涉及最后一行 flexbox 的问题，这是一个不错的解决方法。

.flex { 显示：弹性；弹性方向：行；弹性包装：换行；边距：1em 0；背景颜色：桃子； } .item { 左边距：10px;边框：1px 实心；填充：10px；宽度：计算（100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);背景颜色：木瓜鞭； } .item:nth-child(4n + 1) { margin-left: 0; } .item:nth-child(n + 5) { margin-top: 10px; }

确实有一种很好的、整洁的、纯 CSS 的方式来做到这一点（人们可能会认为它“更好”）。

在这里发布的所有答案中，我只找到了一个成功使用 calc() 的答案（作者 Dariusz Sikorski）。但是当提出：“但如果最后一行只有 2 个项目，它会失败”没有扩展解决方案。

该解决方案通过替代负边距解决了 OP 的问题，并解决了 Dariusz 面临的问题。

笔记：

此示例仅演示 3 列布局

它使用 calc() 让浏览器按照它想要的方式进行数学运算——100%/3（尽管 33.3333% 应该也可以工作）和 (1em/3)*2（虽然 .66em 也应该可以正常工作）。

如果元素少于列，它使用 ::after 填充最后一行

.flex-container { 显示：弹性； justify-content: 之间的空格；弹性包装：换行； } .flex-container:after { content: ""; } .flex-container > div, .flex-container:after { box-sizing:border-box;宽度：计算（（100%/3）-（（1em/3）*2））； } .flex-container > :nth-child(n + 4) { margin-top: 1em; } /* 以下只是可视化项目 */ .flex-container > div, .flex-container:after { font-size: 2em; } .flex-container { margin-bottom:4em; } .flex-container > div { text-align: center;背景颜色：#aaa；填充：1em； } .flex-container:after { 边框：1px 红色虚线； }

示例 1（2 个元素）

示例 2 ( 3个元素）

同样在 https://codepen.io/anon/pen/rqWagE

---

它并非在所有情况下都有效，但如果您有灵活的子宽度 (%) 并且知道每行的项目数，您可以使用 nth-child 选择器非常清晰地指定必要元素的边距。

这在很大程度上取决于您所说的“更好”是什么意思。这种方式不需要子元素或负面元素的额外包装标记 - 但这些东西都有它们的位置。

部分{显示：块宽：100vw； } .container { 对齐内容：弹性开始；对齐项目：拉伸；背景颜色：#ccc；显示：弯曲； flex-flow：换行；证明内容：弹性开始；宽度：100%； } .child-item { 背景颜色：#c00;保证金底部：2%；最小高度：5em；宽度：32%； } .child-item:nth-child(3n-1) { margin-left: 2%;右边距：2%； }