Question

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

Answer 1

容器没有固定的宽度（我使用max-width：max-content;），并且可以包含任意数量的元素。

您可以使用inline-flex容器，因为内联元素将适合其内容，并且将保留在一行中。

我需要这些元素之间的间距，但是不需要在元素和容器之间的左右两侧。

您可以在 flex项上设置一个margin: 10px，然后将margin-left: 0设置为第一个 flex项和margin-right: 0到最后一个 flex项目-请参见下面的演示

body {
  margin: 0;
}

.container {
  display: inline-flex;
  background: cadetblue;
}

.element {
  margin: 10px;
  background: pink;
  padding: 5px;
}

.element:first-child {
  margin-left: 0;
}

.element:last-child {
  margin-right: 0;
}

<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 class="element">my element</div>
  <div class="element">my element</div>
</div>

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>

Answer 3

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

Answer 4

我找到了CSS多列布局https://www.w3schools.com/CSS/css3_multiple_columns.asp，这可能正是我想要的。

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

4 个答案: