Flexbox实现子项均匀间距且首尾对齐的解决方案（40个固定宽度子项场景）

你想要实现的「子项均匀分布、首尾与容器边缘对齐」的效果，其实正是justify-content: space-between的核心作用，可能你对它的表现有误解？先帮你算清楚布局逻辑：40个宽度4px的子项总宽度是40 * 4px = 160px，容器宽度300px，剩余的300px - 160px = 140px会被平均分配给40个子项之间的39个间隔，每个间隔约为3.59px，这就是space-between实现的均匀间距。

如果你的代码里space-between没达到预期，大概率是有其他CSS规则干扰了布局（比如子项额外的内边距、容器的padding等）。不过这里再给你几个更可控的替代方案，同样能满足需求：

方案一：手动计算间距（margin + calc） #

给除最后一个子项外的所有子项设置右边距，用calc精确计算间距值，效果和space-between完全一致：

.container { 
  background: blue; 
  display: flex; 
  height: 20px; 
  width: 300px; 
} 
.item{
  width: 4px; 
  border-radius: 4px; 
  background: black; 
}
/* 给倒数第一个之外的所有子项设置间距 */
.item:not(:last-child) {
  margin-right: calc((100% - 40 * 4px) / 39);
}

方案二：使用CSS Grid布局 #

Grid在均匀分布场景下同样灵活，代码更简洁：

.container { 
  background: blue; 
  display: grid;
  /* 定义40个宽度为4px的列 */
  grid-template-columns: repeat(40, 4px);
  /* 让列首尾对齐，中间均匀分配空间 */
  justify-content: space-between;
  height: 20px; 
  width: 300px; 
} 
.item{
  border-radius: 4px; 
  background: black; 
}

方案三：动态适配的CSS变量方案（拓展） #

如果以后子项数量或宽度需要修改，用CSS变量可以避免重复计算，维护更方便：

.container { 
  --item-count: 40;
  --item-width: 4px;
  background: blue; 
  display: flex; 
  height: 20px; 
  width: 300px; 
} 
.item{
  width: var(--item-width); 
  border-radius: 4px; 
  background: black; 
}
.item:not(:last-child) {
  margin-right: calc((100% - var(--item-count) * var(--item-width)) / (var(--item-count) - 1));
}

内容的提问来源于stack exchange，提问作者Yaamu