为什么不这样做呢:

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

它使用相邻的兄弟选择器，为所有.item元素赋值，除了第一个元素左距。多亏了flexbox，这甚至导致了同样宽的元素。当然，这也可以通过垂直定位的元素和margin-top来实现。

我发现最简单的方法就是用百分比来计算，然后让页边距来计算宽度

这意味着如果你使用你的例子，你最终会得到这样的结果

#box {
   display: flex;
}

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

这意味着你的值是基于宽度的，虽然这可能对每个人都不好。

更新:缝隙的flexbox现在支持所有现代浏览器(Edge/Chrome/Opera/三星互联网/Safari/Firefox)

最终，他们将把gap属性添加到flexbox中。在此之前，你可以使用CSS网格代替已经有间隙属性，只有一行。比处理边距要好。

比如说，如果你想在项目之间设置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 >

这种解决方案适用于所有情况，即使有多行或任意数量的元素。但是section的计数应该是一样的，你想在第一行有4个，第二行有3个，这样不行，第4个内容的空间将是空白的，容器不会填充。

我们使用display: grid;以及它的性质。

#箱{ 显示:网格; 宽度:100 px; grid-gap: 5 px; /*项目之间的空格*/ grid-template-columns:重复(4 1 fr); /*决定列的数量(4)和大小(1fr | 1分数|你也可以使用像素和其他值)*/ ｝ .item { 背景:灰色; 宽度:100%; /* width是没有必要的，只是添加这个来理解width工作为网格模板分配空间的100%**默认宽度将是100%** */ 高度:50 px; ｝ < div id =“盒子”> < 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 >

这种方法的缺点是在移动Opera Mini将不被支持，在PC上只有在IE10之后才能工作。

注意，完整的浏览器兼容性包括IE11，请使用Autoprefixer

旧的答案 不要认为它是一个旧的解决方案，如果你只想要单行元素，它仍然是最好的解决方案之一，它可以在所有浏览器上工作。

这个方法是由CSS兄弟姐妹组合使用的，所以你也可以用许多其他的方式来操作它，但如果你的组合是错误的，它也可能会导致问题。

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

下面的代码将完成这个任务。在这种方法中，不需要给出margin: 0 -5px;到#box包装器。

为您提供一个工作示例:

#箱{ 显示:flex; 宽度:100 px; ｝ .item { 背景:灰色; 宽度:22 px; 高度:50 px; ｝ .item + .item { margin-left: 5 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

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

有关工作示例，请参阅此代码笔

基本上，在列容器中，前面有另一个子容器的每一个子容器都有上边距。同样，在每个行容器中，前面有另一个子容器的子容器都有左边距。

.box { 显示:flex; flex-grow: 1; flex-shrink: 1; ｝ .box。列{ flex-direction:行; ｝ .box.columns > .box ~。盒子{ margin-left: 5 px; ｝ .box。行{ flex-direction:列; ｝ .box.rows > .box ~。盒子{ margin-top: 5 px; ｝ <div class="box columns"> < span style=" font - family:宋体;"> < / div > <div class="box rows"> <div class="box rows"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > <div class="box columns"> < span style=" font - family:宋体;"> < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div > < span style=" font - family:宋体;"> < / div > < / div > < / div >