如何使用flex展开元素以在父容器中占据相同的宽度

Question

My codepen

我要实现的目标：

我希望流程指示符父元素中的元素具有相同的宽度，但具有class = step的元素以及具有步骤名称的div直接位于step元素之下。

过程指示器拉伸100％，并且连接器类不应使用固定的像素宽度，因此我可以添加5,6或10步，并且可以很好地进行图形缩放。

什么不起作用：

1。）黄色中的第一个后连接器元素和最后一个前连接器元素与绿色/黑色元素的大小不同

2。）div中的步骤名称应位于相应的步骤气泡下方，且不得与步骤和连接器内联。

---

请注意，我不不想为step元素使用before / after伪选择器！ =>

我需要稍后能够通过react动态应用完整/不完整的类，因此我需要对每个连接器进行完全控制。

HTML

<ul class="process-indicator">
  <li class="completed">
    <span class="step"></span>
    <span class="after-connector"></span>
    <div>step 1</div>
  </li>
  <li class="incompleted">
    <span class="before-connector"></span>
    <span class="step"></span>
     <span class="after-connector"></span>
    <div>step 2</div>
  </li>
  <li class="incompleted">
    <span class="before-connector"></span>
    <span class="step"></span>    
    <span class="after-connector"></span>
    <div>step 3</div>
  </li>
  <li class="incompleted">
    <span class="before-connector"></span>
    <span class="step"></span>    
    <div>step 4</div>
  </li>
</ul>

SCSS

  $incomplete: gray;
$complete: blue;
$step-size: 40px;
$step-line-thickness: 2px;
$border-thickness: 1px;
$darken-amount: 30%;

@mixin step-style($color) {
  background-color: $color;
  color: $color;
  border-color: darken($color, $darken-amount);

  &:before,
  &:after {
    background-color: $color;
    border-color: darken($color, $darken-amount);
  }
}

.flex {
  -ms-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  flex: 1;
}

.displayFlex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.process-indicator {
  background: orange;
  @extend .displayFlex;
  margin: 0;
  padding: 0;
  margin-bottom: 1em;

  > li {
    @extend .displayFlex;
    @extend .flex;

    list-style: none;
    font-size: 1.2em;
    position: relative;
    text-overflow: ellipsis;
    color: $incomplete;
  }

  > li .before-connector,
  li .after-connector {
    @extend .flex;

    position: relative;
    text-overflow: ellipsis;
    color: $incomplete;
  }

  > li .step {
    width: $step-size;
    height: $step-size;
    background-color: $incomplete;
    border-radius: 40px;
  }
  // line connectors
  > li .after-connector {
    height: 3px;
    top: $step-size / 2;
    background-color: green;
  }
  > li .before-connector {
    height: 3px;
    top: $step-size / 2;
    background-color: red;
  }
  > li:first-child span.after-connector,
  > li:last-child span.before-connector {
    background: yellow;
  }
  // completed state
  > li.completed {
    color: $complete;
    .step {
      @include step-style($complete);
    }
  }

  > li.incompleted {
    color: $incomplete;
    .step {
      @include step-style($incomplete);
    }
  }
}

更新

Answer 1

我会在容器上使用flex解决方案，然后将分隔符移到外面，以便它们可以均匀增长：

.container {
  display: flex;
  width: 100%;
  background: orange;
}

.step {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  background: grey;
}

.text {
  font-weight:bold;
  font-size:20px;
  position: absolute;
  top: 100%;
  margin-top: 10px;
  left: 0;
  white-space: nowrap;
}
.step:last-child .text {
  right:0;
  left:auto;
}
.seperator {
  flex-grow: 1;
  position: relative;
}

.seperator:before {
  content: '';
  display: block;
  height: 10px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.yellow:before {
  background: yellow;
}

.green:before {
  background: green;
}

.red:before {
  background: red;
}

<div class="container">
  <div class="step">
    <span class="text">Step 1</span>
  </div>
  <div class="seperator yellow"></div>
  <div class="seperator red"></div>
  <div class="step">
    <span class="text">Step 2</span>
  </div>
  <div class="seperator green"></div>
  <div class="seperator red"></div>
  <div class="step">
    <span class="text">Step 3</span>
  </div>
  <div class="seperator green"></div>
  <div class="seperator yellow"></div>
  <div class="step">
    <span class="text">Step 4</span>
  </div>
</div>

请注意，您需要在容器的底部添加边距，以防止文本以下的内容重叠