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

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

当然我可以用.element{margin-right: 10px} and .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>

您可以将 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>