如何将弹性物品摊开到比容器宽度还大的位置？

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>

Answer 2

如果可能的话，您可以尝试使用多个背景而不是flexbox。这个想法是对圆使用径向渐变，对背景使用线性渐变-请参见下面的演示

div{
  width: 30vw;
  height: 8vw;
  margin: 10px;
  background: radial-gradient(circle, green calc(1vw - 2px) calc(1vw - 1px), transparent 1vw) center / calc(100% / var(--n)) 2vw repeat-x,         
              linear-gradient(black, black) center / calc(100% - 100% / var(--n)) 100% no-repeat;  
}

<div style="--n:5"></div>
<div style="--n:9"></div>

---

现在，您可以通过基于圆圈数更改div的宽度来为黑色背景设置固定的宽度-请参见下面的演示，并以红色背景显示实际的边界：

div {
  height: 8vw;
  margin: 10px calc(-15vw / var(--n));
  position: relative;
  width: calc(30vw + 30vw / var(--n));
  background: radial-gradient(circle, green calc(1vw - 2px) calc(1vw - 1px), transparent 1vw) 0 50% / calc(30vw / var(--n)) 2vw repeat-x,
              linear-gradient(black, black) center / calc(100% - 30vw / var(--n)) 100% no-repeat, red;
}

<div style="--n:3"></div>
<div style="--n:5"></div>
<div style="--n:9"></div>

---

使用伪元素进行修饰以应用背景，并具有div上指定的宽度（出于一般性）-最终结果如下：

div {
  --w: 30vw;
  height: 8vw;
  width: var(--w);
  margin: 10px;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  height: 100%;
  width: calc(100% + 100% / var(--n));
  margin: 0 calc(-1 * var(--w) / var(--n) / 2);
  background: radial-gradient(circle, green calc(1vw - 2px) calc(1vw - 1px), transparent 1vw) 0 50% / calc(var(--w) / var(--n)) 2vw repeat-x,
              linear-gradient(black, black) center / calc(100% - var(--w) / var(--n)) 100% no-repeat;
}

<div style="--n:3"></div>
<div style="--n:7"></div>
<div style="--n:9"></div>

Answer 3

您可能会选择背景为黑色的伪元素。稍微增加容器的宽度，以便点可以扩展1vw。有了justify-content：您之间的空间就不需要点距了。点的位置相对，因此显示在黑色背景的顶部。

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

#dot-container:before {
  content: '';
  display: block;
  position: absolute;
  width: 30vw;
  height: 8vw;
  margin: 0 1vw;
  background: black;
}

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

Answer 4

您可以通过使元素的宽度和边距超过总宽度来依靠溢出。从您的图中，我们有一个半圆形的圆圈从左侧和右侧溢出，因此整个圆圈都在溢出

考虑到这一点，总宽度为6*width_of_circle + total_margin。我们可以将此边距划分为6个部分（在我们的7个圆环之间），我们将得到6*width_of_circle + 6*small_margin，因此每个边距将是total_width/6 - width_of_circle，我们将在每一边进行分割：

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

.dot {
  border-radius: 100%;
  width: 2vw;
  height: 2vw;
  margin: 0 calc((100%/6 - 2vw)/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}

<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>

如果需要，您可以用百分比表示所有内容：

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

.dot {
  border-radius: 100%;
  width: calc(100%/15);
  margin: 0 calc((100%/6 - 100%/15)/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}

<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>

我们可以添加CSS变量，以通过保持相同的配置和第一个/最后一个圆溢出来轻松控制点的宽度：

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

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/6 - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}

/* To keep the square ratio instead of setting height*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div id="dot-container" style="--d:10">
  <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 id="dot-container" style="--d:8">
  <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 id="dot-container" style="--d:20">
  <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>

---

如果要添加/删除点，只需调整值6，即点数减去一：

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

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/(var(--n) - 1) - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div id="dot-container" style="--d:10;--n:5">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="dot-container" style="--d:8;--n:7">
  <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 id="dot-container" style="--d:20;--n:9">
  <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 class="dot"></div>
</div>

---

请注意，第一个元素的左边距和最后一个元素的右边距不必等于计算值，因为它们会溢出。他们只需要为0设置相同的值：

等于0：

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

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/(var(--n) - 1) - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}
.dot:first-child {
 margin-left:0;
}
.dot:last-child {
 margin-right:0;
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div id="dot-container" style="--d:10;--n:5">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="dot-container" style="--d:8;--n:7">
  <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 id="dot-container" style="--d:20;--n:9">
  <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 class="dot"></div>
</div>

等于随机值：

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

.dot {
  border-radius: 100%;
  width: calc(100%/var(--d));
  margin: 0 calc((100%/(var(--n) - 1) - 100%/var(--d))/2); 
  background: green;
  flex-shrink:0; /* Don't shrink*/
}
.dot:first-child {
 margin-left:658624px;
}
.dot:last-child {
 margin-right:658624px;
}

/* To keep the square ratio*/
.dot:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div id="dot-container" style="--d:10;--n:5">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<div id="dot-container" style="--d:8;--n:7">
  <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 id="dot-container" style="--d:20;--n:9">
  <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 class="dot"></div>
</div>