如何将我的弹性项目扩展到超过容器宽度的范围？

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

如果可能的话，你可以尝试多种背景，而不是柔性盒。其思想是对圆圈使用径向梯度，对背景使用线性梯度-参见下面的演示：

​

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

您可以通过元素的宽度和边距超过总宽度来依赖溢出。从你的图形上看，我们有半个圆圈从左向右溢出，这样一个完整的圆圈就满了。

考虑到这一点，总宽度为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，即点数减去1：

​

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

​