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

【问题标题】：CSS flex-wrap: Put gap between items unless wrapped?CSS flex-wrap：除非包裹，否则在项目之间放置间隙？
【发布时间】：2019-05-14 07:57:10
【问题描述】：

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

通过调整大小，一旦没有足够的空间留给两者，flex-wrap 将第二个孩子移动到第一个孩子之下，所以我不再需要 1. item 的 margin-right。

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

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

小提琴注意：您应该调整窗口大小（减小宽度）并查看包裹的情况。如果你继续减小宽度，你会看到第一个孩子的文本也会分成两行，因为 margin-right 在那里并且占据了空间。

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

【问题讨论】：

请出示您的代码
单独使用 CSS 和 Flex 是不可能的。如果我们知道您的最终结果是什么，建议解决方法会更容易。
AFAIK，最常见的解决方案是给周围的孩子一个边距（margin:150px 而不是margin-right:300px），然后在父级（margin:-150px）上有一个负边距只剩下孩子之间的差距。
@akcasoy 看看这个，例如：stackoverflow.com/questions/20626685/…
@akcasoy 这也可能是相关的：stackoverflow.com/questions/40890613/…

标签： css html flexbox

【解决方案1】：

我知道这是一个老问题，但您可以使用“column-gap”和“row-gap”来定义某个方向的间隙。

例如：

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

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

【讨论】：

【解决方案2】：

您可以尝试为此使用 CSS-grid：

.parent {
  display:grid;
  grid-column-gap:300px;
  grid-template-columns:repeat(auto-fit,minmax(100px,max-content));
}
.parent > * {
  border:1px solid;
}

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

【讨论】：