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

Question

My codepen

我想要达到的目标：

我希望 process-indicator 父级中的元素占据相同的宽度，除了具有 class=step 的元素并且具有 step 名称的 div 直接位于 step 元素下。

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

什么不起作用：

1.) 黄色的第一个 after-connector 和最后一个 before-connector 元素与绿色/黑色元素的大小不同

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>

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