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

Question

我有一个 flex 容器，它将被元素动态填充。Container 没有固定宽度（我使用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>

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>