如何在Flexbox布局中缩小步骤节点与连接线的间距？

问题分析 #

当前布局中，.step和.line都是.steps-container的直接Flex子项，默认情况下Flex子项会按自身尺寸排列，线条与球体的间距本质是.step容器的默认水平空间（.step未限制宽度，其宽度包含球体和下方标签的最大宽度），再加上.line作为独立子项无法主动贴合球体边缘，导致间距过大。

解决方案1：负margin快速拉近线条 #

直接修改.line样式，通过负margin让线条向两侧球体靠拢，可根据需求调整数值：

.line {
  position: relative;
  top: 25px;
  height: 3px;
  background-color: lightgrey;
  flex-grow: 1;
  max-width: 150px;
  /* 负margin让线条贴近球体，数值可按需调整 */
  margin: 0 -8px;
}

解决方案2：伪元素替代独立线条（更推荐） #

将线条改为.step的伪元素，让线条与球体直接关联，避免独立Flex子项的间距问题，结构更简洁：

修改后的HTML（移除独立.line元素） #

<div class="steps-container">
  <div class="step">
    <div class="sphere">1</div>
    <div class="label">First step label</div>
  </div>
  <div class="step">
    <div class="sphere">2</div>
    <div class="label">Second step label</div>
  </div>
</div>

修改后的CSS #

.steps-container,
.label-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: relative; /* 让伪元素参考容器定位 */
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px; /* 控制步骤间的整体间距 */
}

.sphere {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: lightgrey;
  color: white;
  font-size: 32px;
  position: relative;
  z-index: 1; /* 确保球体层级高于线条 */
}

/* 给最后一个之外的步骤添加右侧连接线条 */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 25px;
  left: calc(50% + 25px); /* 从球体右侧边缘开始 */
  width: calc(100% - 50px);
  height: 3px;
  background-color: lightgrey;
  max-width: 150px; /* 限制线条最大长度 */
}

.label {
  text-align: center;
  position: relative;
}

这种方式无需手动维护线条元素，线条与球体位置完全绑定，步骤数量增减时更易维护。

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