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

.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以外的间距类。

使用flexbox，创建排水沟是一种痛苦，特别是当涉及到包装时。

你需要使用负边距(如问题所示):

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

．.． 或更改HTML(如另一个答案所示):

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

．.． 或者别的什么。

在任何情况下，你都需要一个丑陋的黑客来让它工作，因为flexbox不提供“弹性间隙”功能 (至少现在是这样)。

水槽的问题，然而，是简单和容易的CSS网格布局。

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

grid-column-gap grid-row-gap 网格间隙(以上两个属性的简写)

最近，该规范已经更新，以符合CSS框对齐模块，它提供了一组用于所有框模型的对齐属性。属性现在是:

纵队间隔 row-gap 差距(简写)

然而，并不是所有支持grid的浏览器都支持更新的属性，所以我将在下面的演示中使用原始版本。

同样，如果项目和容器之间需要空格，容器上的填充就可以了(请参阅下面演示中的第三个示例)。

来自规范:

10.1. 排水沟:行隙、列隙、隙 属性 行间隙和列间隙属性(以及它们的间隙简写)， 当在网格容器上指定时，定义网格之间的水槽 行和网格列。它们的语法在CSS框对齐3中定义 §8箱子之间的空隙。 这些属性的效果就像受影响的网格线一样 获取厚度:两条网格线之间的网格轨迹就是空间 在代表他们的排水沟之间。

.box { 显示:inline-grid; grid-auto-rows: 50 px; Grid-template-columns:重复(4,50px); 边框:1px纯黑色; ｝ 。{ grid-column-gap: 5 px; ｝ :({ grid-column-gap: 10 px; grid-row-gap: 10 px; ｝ .three { grid-gap: 10 px; 填充:10 px; ｝ .item { 背景:浅灰色; ｝ <div class='box one'> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div > <人力资源> <div class='box two'> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div > <人力资源> <div class='box 3 '> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

更多信息:

浏览器对CSS网格的支持 更容易定义只应用于伸缩项之间的页边距(讨论) flexbox项目之间的间距

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

假设:

你想要4列网格布局与包装 项目的数量不一定是4的倍数

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

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

这是一个体面的工作，涉及flexbox最后一行的问题。

.flex { 显示:flex; flex-direction:行; flex-wrap:包装; 保证金:1em 0; background - color:桃色; ｝ .item { margin-left: 10 px; 边框:1px实体; 填充:10 px; 宽度:calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4); background - color:番木瓜; ｝ .item:n -child(4n + 1) { margin-left: 0; ｝ .item:n -child(n + 5) { margin-top: 10 px; ｝ flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > < / div > flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > 5 < div class = "项目" > < / div > < div class = "项目" > < / div > 6 < / div > flex < div class = " " > < div class = "项目" > < / div > 1 < div class = "项目" > < / div > 2 < div class = "项目" > 3 < / div > 4 < div class = "项目" > < / div > 5 < div class = "项目" > < / div > < div class = "项目" > < / div > 6 < div class = "项目" > < / div > 7 < div class = "项目" > < / div > 8 < div class = "项目" > < / div > 9 < / div >

确实有一种很好的、整洁的、只使用css的方法来做到这一点(可以认为“更好”)。

在这里发布的所有答案中，我只找到了一个成功使用calc()的答案(由Dariusz Sikorski)。但当提出:“但如果最后一行只有2项，它就失败了”时，就没有展开解。

这个解决方案解决了OP的问题，替代了负边际，解决了Dariusz的问题。

注:

本例只演示了3列布局 它使用calc()让浏览器以它想要的方式进行数学运算—— 100%/3(尽管33.3333%也可以)，以及 (1em/3)*2(尽管。66em也可以)。 如果元素少于列，则使用::after填充最后一行

.flex-container { 显示:flex; justify-content:之间的空间; flex-wrap:包装; ｝ .flex-container:{后 内容:“”; ｝ .flex-container > .flex-container:{后 box-sizing: border-box; 宽度:calc((100%/3) - ((1em/3)*2)); ｝ .flex-container >:n -child(n + 4) { margin-top: 1 em; ｝ /*下面只是为了可视化项目*/ .flex-container > .flex-container:{后 字体大小:2 em; ｝ .flex-container { margin-bottom: 4 em; ｝ .flex容器> div { text-align:中心; background - color: # aaa级; 填充:1 em; ｝ .flex-container:{后 边框:1px红色虚线; ｝ <h2>示例1(2个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < / div > <h2>示例2(3个元素)</h2> < div class = " flex-container”> < div > 1 < / div > 2 < div > < / div > < div > 3 < / div > < / div >

另见https://codepen.io/anon/pen/rqWagE

我发布了我的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/