如何在弹性项目之间添加空格（如装订线）？

Question

我的网页中有两个元素，例如：

.host {
  display: flex;
  justify-content: spece-between;
}

.left {
  width: 300px;
  margin-bottom: 20px;
}

.right {
  width: 300px;
}

<div class='host'>
  <div class='left'></div>
  <div class='right'></div>
</div>

当主机div足够宽时，这会将左div和右div放在同一行。如果主机div的宽度小于600px，则包装该行。

事实是，我想在左右div之间添加一个边距，否则当主机的宽度正好为600px时，两者之间就没有空格。

我不能简单地在左div处添加margin-right，因为在换行时，这会使两个元素具有不同的宽度。

是否有一些优雅的解决方案可以实现这一目标？

谢谢！

Answer 1

是否有一些优雅的解决方案可以实现这一目标？

尚未使用flexbox。在the gap property可用于伸缩容器之前，您将不得不使用页边距，间隔元素或其他内容来破解解决方案。

但是，使用gap和auto-fit在网格布局中提供了一种优雅而简单的解决方案。

grid-gap

.host {
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: space-between;
  grid-gap: 10px;  /* shorthand for grid-column-gap and grid-row-gap */
}

/* non-essential demo styles */
.host { border: 1px dashed black; }
.left, .right { background-color: lightgreen; text-align: center;
}

<div class='host'>
  <div class='left'>left</div>
  <div class='right'>right</div>
</div>