伸缩项目之间的间距相等

Question

有没有办法在所有物品的两面都放置一个完整的空间，包括第一个和最后一个？

我正在尝试找到一种在flexbox子代之间具有相等间距的方法。

在本文中，似乎最接近的是justify-content: space-around。它说：

space-around：项目在行中均匀分布，并且周围有相等的空间。请注意，从视觉上看，空间是不相等的，因为所有项目的两侧都具有相等的空间。第一项相对于容器边缘有一个单位的空间，但是下一项之间有两个单位的空间，因为下一项具有自己的适用间距。

Answer 1

这是一个完美的使用情况flex-basis和justify-content: space-between如果你知道有多少成分会成为你行提前。在弹性项目上指定所有项目的总弹性百分比小于100％。剩余的百分比将成为边距。没有伪元素，子选择器或填充/边距。div {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; height: 100px;}span {&nbsp; flex-basis: 32%;&nbsp; background: red;}<div>&nbsp; <span></span>&nbsp; <span></span>&nbsp; <span></span></div>