Создание компонента пользовательского интерфейса шага выполнения с использованием только FLEX и CSS - Справка w Позиционирование маркировки?

Question

Я пытаюсь создать компонент пользовательского интерфейса ProgressSteps, подобный тому, который я видел в 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>