如何使用CSS水平平均分配元素

Question

我有11个点使用CSS水平排列。如何<span>根据浏览器窗口的宽度均匀/平均地分配元素之间的间距（我是元素）？

到目前为止，这是我的示例代码：

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ddd;
  position: absolute;
  left:0;
  top: 45px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
#second{
  left: 190px;
}
#third{
  left: 380px;
}
#fourth{
  left: 570px;
}
#five{
  left: 760px;
}
#six{
  left: 950px;
}
#seven{
  left: 1140px;
}
#eight{
  left: 1330px;
}
#nine{
  left: 1520px;
}
#ten{
  left: 1710px;
}
#eleven{
  left: 1900px;
}

<span id="first" class="border-change circle"></span>
<span id="second" class="circle"></span>
<span id="third" class="circle"></span>
<span id="fourth" class="circle"></span>
<span id="five" class="circle"></span>
<span id="six" class="circle"></span>
<span id="seven" class="circle"></span>
<span id="eight" class="circle"></span>
<span id="nine" class="circle"></span>
<span id="ten" class="circle"></span>
<span id="eleven" class="circle"></span>

Answer 1

使用flexbox，您可以执行以下操作：

.parent {
    display: flex;
    justify-content: space-between;
}

span.circle {
  height: 20px;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #eee;
  background:#ddd;   
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

<div class="parent">
    <span id="first" class="border-change circle"></span>
    <span id="second" class="circle"></span>
    <span id="third" class="circle"></span>
    <span id="fourth" class="circle"></span>
    <span id="five" class="circle"></span>
    <span id="six" class="circle"></span>
    <span id="seven" class="circle"></span>
    <span id="eight" class="circle"></span>
    <span id="nine" class="circle"></span>
    <span id="ten" class="circle"></span>
    <span id="eleven" class="circle"></span>
</div>

JSFiddle演示