要设置flexbox项目之间的最小距离,我使用margin: 0 5px on .item和margin: 0 -5px on container。对我来说,这似乎是一种hack,但我找不到更好的方法来做到这一点。

#箱{ 显示:flex; 宽度:100 px; Margin: 0 -5px; } .item { 背景:灰色; 宽度:50 px; 高度:50 px; 边距:0 5px; } < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < / div >


当前回答

博士tl;

$gutter: 8px;

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

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

其他回答

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

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

#box {
   display: flex;
}

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

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

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

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

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

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

我之前遇到过同样的问题,然后偶然发现了这个问题的答案。希望对大家有所帮助,供今后参考。

长话短说,给孩子的弹性物品添加边框。 然后,您可以指定flex项之间的空白。 在代码片段中,我使用黑色来说明,如果你喜欢,你可以使用“透明”。

#箱{ 显示:flex; 宽度:100 px; /* margin: 0 -5px;*删除* / } .item { 背景:灰色; 宽度:50 px; 高度:50 px; /* margin: 0 5px;*删除* / 边框:1px纯黑色;/*添加这个*/ } .item。特殊{边距:0 10px;} < div id =“盒子”> < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > < div class = '物品' > < / div > <div class='item special'></div> < / div >

嗯,在我看来,关于CSS最简单的解决方案, 是在HTML中添加间隔符:

<div id='box'>
  <div class='item'></div>
  <div style='width: 5px;'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

所以,你可以用内联风格或类名来控制它。 有时候,也可以用填充来做间距。

下面是一个例子

好吧,现在你有一个缺口,所以你可以使用它,但好的ol技术仍然是不可避免的,像<div><div></div></div>包装构造独特的项目与独特的缺口(使用填充物为缺口!和ofc新的gap属性)