Question

我经常遇到这种情况，即我有两个flex-children，其属性为flex-direction行。因此，它们首先以并排显示的方式在它们之间留有间隙（右边界）。

并且通过调整大小，只要两者都没有足够的空间，flex-wrap就会将第二个孩子移到第一个孩子的下面，因此我不再需要第一个项目的右边距。

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

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

.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

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

例如：

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

在这种情况下，间隙将仅影响列。

Answer 2

您可以尝试使用CSS网格：

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

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

2 个答案: