编辑 - 我不建议使用这种方法，它是hackish。我将这里留给后人。

Question

这就是我想要的：

flex with spacing

The closest I've got.在flexbox项目上应用保证金，然后从第一个＆amp;最后的孩子。

问题是:first-child并不总是第一个直观的，因为我可能会改变布局顺序（example）。

在应用保证金时是否有办法考虑视觉顺序？

Answer 1

您可以尝试为所有框设置相同的边距，然后在容器上将其恢复：

所以替换这个：

.flex > * { margin: 0 10px; }    
.flex > :first-child { margin-left: 0; }
.flex > :last-child { margin-right: 0; }

.flex.vertical > :first-child { margin-top: 0; }
.flex.vertical > :last-child { margin-bottom: 0; }

有了这个：

.flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }

Answer 2

这是获得同样事物的另一种方式。

( C:\Program Files (x86)\swipl\project1\src\file.pl )

Answer 3

虽然Rejoy answer工作正常，但它没有响应就绪，因为行已被锁定。

flex-flow是你的新朋友。但是，flex并非没有错误。我们从各种网格框架中知道的负边距技巧确实有效，除非你在IE上，因为它使用内容框作为框大小，因此元素被包装得太早。但是有一个简单的解决方法。

工作示例：https://jsfiddle.net/ys7w1786/

.flex {
  display: flex;  
  flex-direction: row; /* let the content flow to the next row */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -4px -4px; /* grid trick, has to match box margin */
}

由于IE，这些框附带flex-basis: auto。但我们可以简单地使用width：

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 8px); 
}
.s1-4{
  width: calc(25% - 8px);
}

Answer 4

编辑 - 我不建议使用这种方法，它是hackish。我将这里留给后人。

我做了什么来解决这个问题，因为我不确定每个弹性空间中我有多少元素。例如，我正在构建一个Drupal主题，并且有四个并排排列的区域，但我想要占用整个宽度，即使只有三个区域中有内容。

为每个区域填充10px
设置每个区域的背景颜色以匹配主题背景颜色 - 在我的情况下为白色
在每个区域内创建一个div（以创建它们之间的边距错觉。

HTML看起来像这样：

<div class="flexy">
    <div class="region">
       <div class="region-inner">
       </div>
    </div>
</div>

CSS看起来像这样：

.flexy {
    display: flex;
    flex-wrap: wrap;
}

.flexy .region {
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
}

这给我留下了这样的布局（忽略丑陋，颜色仅用于演示）：

还添加了一些其他课程，例如＆＃39; halfves＆＃39;，＆＃39; thirds＆＃39;和＆＃39; quarters＆＃39;帮助在较小和/或较大的屏幕上做出响应。

Answer 5

使用带有负边距

的包装div可以实现所需的布局

.flex-wrapper{
    margin: -20px;
}

工作代码http://jsfiddle.net/8cju5jpd/

Answer 6

使用Flex的另一个要点是，您可以指定用于剩余空间的策略：

.container {
    justify-content: space-between;
}

Answer 7

试图坚持您的问题：

是否有一种方法可以在应用保证金？

我会说不，就好像您无法根据元素的背景色来为其设置样式一样。为此，您可以编写自定义类来设置弹性顺序，然后基于它们创建子类。

请查看这个有趣的线程，我在其中发布了有关间距的解决方案： Better way to set distance between flexbox items

Answer 8

最近CSS规范updated可以将gap属性应用于CSS网格元素之外的flexbox元素。并非所有浏览器都支持此功能（just Firefox at time of writing；将其添加到Chrome的错误跟踪器页面为here），但是不久之后，您就可以仅使用gap: 10px（或任何大小）即可），而无需处理边距:first-child，:last-child等。

Answer 9

创建一个虚拟div /间隔视图是否不好？

<Item style={{flex:1}} />
<View style={{width: 10}}
<Item style={{flex:1}} />

Flexbox项之间的间距

9 个答案:

编辑 - 我不建议使用这种方法，它是hackish。我将这里留给后人。