CSS flex-wrap：除非包裹，否则在项目之间放置间隙？

Question

我经常遇到这种情况，即我有 2 个 flex-children，具有属性 flex-direction row。因此它们首先并排显示，之间有间隙（右边距）。

通过调整大小，一旦没有足够的空间容纳两个子元素，flex-wrap 就会将第二个子元素移动到第一个子元素下方，所以我不再需要 1. item 的 margin-right 了。

我可以根据“换行”状态动态设置边距吗？

小提琴： https: //jsfiddle.net/ejmhxztd/

小提琴注意：您应该调整窗口大小（减少宽度）并查看包装好的情况。如果继续减小宽度，您将看到第一个子元素的文本也将分成两行，因为右边距在那里并占用空间。

.parent {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap
}

.child1 {
  margin-right:300px
}

<div class="parent">
   <span class="child1">Child1 Text</span>
   <span class="child2">Child2 Text</span>
</div>

Answer 1

我知道这是一个老问题，但是您可以使用“列间隙”和“行间隙”来定义仅在某个方向上的间隙。

例如：

.class{
  display: flex;
  align-items: center;
  column-gap: 10px;
  flex-wrap: wrap-reverse;
  flex-direction: row;
}

在这种情况下，间隙只会影响列。