如何将我的 flex 项目展开到超过容器的宽度？

Question

我想用 flex 用 CSS 创建类似的东西：

---

到目前为止我尝试过的是这段代码：

#dot-container {
  position: absolute;
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  margin: 3.2%; /*(30-2*7) / (7-2)*/
  background: green;
}

<div id="dot-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

但我无法真正让它工作，以至于最左边和最右边的点正好在左边和右边的角落，就像你在我上面的图片中看到的那样。

注意：justify-content: space-between;似乎也不起作用，因为点本身最左边但不是点中心！

Answer 1

这可以通过使用justify-content: space-between和使用否定来完成margin。

#dot-container {
  position: absolute;
  width: 30vw;
  background: black;
  height: 8vw;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  margin: -3.2%; /*(30-2*7) / (7-2)*/
  background: green;
}

<div id="dot-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

或者，如果您不想计算边距，您可以添加一个具有绝对定位的子元素，并div.dot像您希望的那样更改元素数量：

#dot-container {
  position: relative;
  width: 30vw;
  height: 6vw;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

#dot-container-inner {
  position: absolute;
  left: 3%;
  top: 0;
  z-index: -1;
  height: 100%;
  width: 95%;
  background: black;
}

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  background: green;
}

<div id="dot-container">
  <div id="dot-container-inner">
  </div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>