如何在div容器内的元素之间留出空间

Question

我有一个弹性容器，它将由元素动态填充。 容器没有固定宽度（我使用 max-width: max-content; ）并且可以包含任意数量的元素。问题是我需要这些元素之间的间距，但不需要元素和容器之间左右两侧的间距。

当然我可以用 .element{margin-right: 10px} 和 .element:last-child{margin-right: none;} 来实现，但是有没有办法在没有伪类和 JS 的情况下实现它？

 <div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  ...
  <!-- nubmer of elements changing -->
  ...
</div>

原文由 Yas‘ka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 flex 与 column-gap 属性一起使用。

此外，如果父容器的宽度增加，设置 justify-content: space-between 将确保元素之间的空间均匀。

 .container {
  display: flex;
  column-gap: 20px;
  justify-content: space-between;
}

.element {
  background: yellow;
}

 <div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
</div>

原文由 GuCier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用与您已经建议的方法相反的方法。将除第一个元素之外的所有元素都设置为留有边距。

然后你可以使用兄弟选择器：

 .container {
  display: inline-flex;
  border: solid 1px red;
}

.element {
  background: yellow;
}

.element + .element {
  margin-left: 20px;
}

 <div class="container">
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
  <div class="element">my element</div>
</div>

原文由 vals 发布，翻译遵循 CC BY-SA 4.0 许可协议