html - 仅使用 FLEX 和 CSS 构建进度步骤 UI 组件 - 帮助标记定位？

Question

我正在尝试构建一个 ProgressSteps ui 组件，就像我在 LinkedIn 上看到的那样:

我想使用 flexbox，所以最终我可以使这个组件动态化。这是我目前拥有的(请参阅包含的代码以了解其编码方式)

我可以使用帮助的地方是将标签定位在底部并居中。我不知道如何用 flexbox 做到这一点，真的想避免使用绝对的、定义的定位……

如何使用 flexbox 更新我的代码以像 LinkedIn 示例一样呈现？

谢谢

.Container {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 32px;
}

.ProgressStep {
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.ProgressDot {
  background-color: dodgerblue;
  max-width: 14px;
  height: 14px;
  flex-grow: 1;
  border-radius: 50%;
  border: 3px solid #fff;
}

.ProgressBar {
  background-color: dodgerblue;
  flex-grow: 1;
  height: 2px;
}

.ProgressLabel {
  font-size: 14px;
  line-height: 17px;
}

<div class="Container">
   <div class="ProgressStep">
      <div class="ProgressDot"></div>
      <div class="ProgressBar"></div>
      <div class="ProgressLabel">LabelHere</div>
   </div>
   <div class="ProgressStep">
      <div class="ProgressDot"></div>
      <div class="ProgressBar"></div>
      <div class="ProgressLabel">LabelHere</div>
   </div>
   <div class="ProgressStep">
      <div class="ProgressDot"></div>
      <div class="ProgressBar"></div>
   </div>
</div>

Answer 1

这可以通过更改 HTML 结构来实现。将 ProgressLabel 元素移出容器。

这是结果:

.Container {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 15px;
}

.ProgressStepLabels {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 15px;
}

.ProgressStep {
  flex-grow: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.ProgressDot {
  background-color: dodgerblue;
  max-width: 14px;
  height: 14px;
  flex-grow: 1;
  border-radius: 50%;
  border: 3px solid #fff;
  margin: 0 17px;
}

.ProgressBar {
  background-color: dodgerblue;
  flex-grow: 1;
  height: 2px;
}

.ProgressLabel {
  font-size: 14px;
  line-height: 17px;
  flex-grow: 1;
}

<div class="Container">
   <div class="ProgressStep">
      <div class="ProgressDot"></div>
      <div class="ProgressBar"></div>
   </div>
   <div class="ProgressStep">
      <div class="ProgressDot"></div>
      <div class="ProgressBar"></div>
   </div>
   <div class="ProgressStep">
      <div class="ProgressDot"></div>
   </div>
</div>
<div class="ProgressStepLabels">
	<div class="ProgressLabel">LabelHere</div>
	<div class="ProgressLabel">LabelHere</div>
	<div class="ProgressLabel">LabelHere</div>
</div>