你可以使用& > * + *作为选择器来模拟一个弹性间距(对于单行):

#box{显示:flex;宽度:230 px;轮廓:1px纯蓝色;｝ .item{背景:灰色;宽度:50 px;身高:100 px;｝ /* ----- Flexbox gap: ----- */ #box > * + * { margin-left: 10 px; ｝ < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >

如果你需要支持伸缩包装，你可以使用wrapper元素:

.flex{显示:flex;flex-wrap:包装;｝ .box{背景:灰色;身高:100 px;min-width: 100 px;flex:汽车;｝ .flex包装{轮廓:1px固体红色;｝ /* -----伸缩间隙10px: ----- */ .flex > * { 保证金:5 px; ｝ .flex { 保证金:5 px; ｝ .flex-wrapper { 宽度:400 px;/* optional */ 溢出:隐藏;/* optional */ ｝ < div class = ' flex-wrapper ' > < div class = ' flex ' > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < div class = '盒子' > < / div > < / div > < / div >

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

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 >数学 < / >节

一个带有-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;
}

博士tl;

$gutter: 8px;

.container {
  display: flex;
  justify-content: space-between;

  .children {
    flex: 0 0 calc(33.3333% - $gutter);
  }
}

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

盒子容器上的负边距技巧效果很好。这是另一个例子，工作的秩序，包装和什么不。

.container { 边框:1px纯绿色; 宽度:200 px; 显示:inline-block; ｝ #箱{ 显示:flex; flex-wrap: wrap-reverse; 保证金:-10 px; 边框:1px纯红色; ｝ .item { Flex: 1台自动; 顺序:1; 背景:灰色; 宽度:50 px; 高度:50 px; 保证金:10 px; 边框:1px纯蓝色; ｝ 当代{ 秩序:0; ｝ < div class =容器> < div id =“盒子”> < div class = '物品' > 1 < / div > < div class = '物品' > < / div > 2 <div class='item first'>3*</div> 4 < div class = '物品' > < / div > < div class = '物品' > < / div > 5 < / div > < / div >