伸缩项目之间的间距相等

Question

有没有办法在所有物品的两面都放置一个完整的空间，包括第一个和最后一个？我正在尝试找到一种在flexbox子代之间具有相等间距的方法。在本文中，似乎最接近的是justify-content: space-around。它说：space-around：项目在行中均匀分布，并且周围有相等的空间。请注意，从视觉上看，空间是不相等的，因为所有项目的两侧都具有相等的空间。第一项相对于容器边缘有一个单位的空间，但是下一项之间有两个单位的空间，因为下一项具有自己的适用间距。

Answer 1

这是一个完美的使用情况flex-basis和justify-content: space-between如果你知道有多少成分会成为你行提前。在弹性项目上指定所有项目的总弹性百分比小于100％。剩余的百分比将成为边距。

没有伪元素，子选择器或填充/边距。

div {

  display: flex;

  justify-content: space-between;

  height: 100px;

}

span {

  flex-basis: 32%;

  background: red;

}

<div>

  <span></span>

  <span></span>

  <span></span>

</div>