Flexbox的利润率并没有下降。 Flexbox没有任何类似于表的边界间距(编辑:CSS属性差距在较新的浏览器中实现了这一角色，我可以使用吗)

因此，实现你的要求有点困难。

根据我的经验，不使用:first-child/:last-child，并且对flex-wrap:wrap不做任何修改的“最干净”的方法是在容器上设置padding:5px，在子元素上设置margin:5px。这将在每个子元素之间以及每个子元素与其父元素之间产生10px的间隙。

Demo

.upper { 保证金:30 px; 显示:flex; flex-direction:行; 宽度:300 px; 身高:80 px; 边框:1px红色实体; 填充:5 px;/* this */ ｝ .upper > div { Flex: 1台自动; 边框:1px红色实体; text-align:中心; 保证金:5 px;/*，这将导致10px的差距*/ ｝ .upper。MC /* multicol test */ { flex-direction:列; flex-wrap:包装; 宽度:200 px; 身高:200 px; } < div class = "上" > < div > 3 < br / > aaa < / div > < div > 3 < / div > < div > 3 < br / > aaa < / div > < div > 3 < br / > aaa < br / > aaa < / div > < div > 3 < / div > < div > 3 < / div > < / div > <div class="上MC "> < div > 3 < br / > aaa < / div > < div > 3 < / div > < div > 3 < br / > aaa < / div > < div > 3 < br / > aaa < br / > aaa < / div > < div > 3 < / div > < div > 3 < / div > < / div >

这不是黑客。 bootstrap和它的网格也使用了同样的技术，不过，bootstrap为它的cols使用了padding而不是margin。

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

这种解决方案适用于所有情况，即使有多行或任意数量的元素。但是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 >

CSS gap属性:

有一个新的gap CSS属性多列，flexbox和网格布局，现在工作在更新的浏览器!(参见我可以使用链接1;它是行间隙和列间隙的简写。

#box {
  display: flex;
  gap: 10px;
}

CSS行间距属性:

flexbox和grid布局的行间距CSS属性允许您在行之间创建间距。

#box {
   display: flex;
   row-gap: 10px;
}

CSS列间距属性:

用于多列、flexbox和网格布局的列间距CSS属性允许您在列之间创建间距。

#box {
  display: flex;
  column-gap: 10px;
}

例子:

#箱{ 显示:flex; flex-wrap:包装; 宽度:200 px; 背景颜色:红色; 差距:10 px; ｝ .item { 背景:灰色; 宽度:50 px; 高度:50 px; 边框:1px黑色实心; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

使用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项目之间的间距