Flexbox布局下数字无法横向排列的问题求助

嘿，我碰到个Flexbox布局的小坑！本来以为能让progress-container里的数字1、2、3、4横向并排显示，结果完全没达到预期效果，肯定是我对Flexbox的理解哪里出问题了，麻烦帮我看看呀~

先贴一下我目前的代码（有些地方截断了，我尽量补全关键部分）：

CSS 代码 #

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #f6f7fb;
  font-family: "Muli", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  max-width: 100%;
  width: 350px;
}

HTML 代码（片段） #

<div class="container">
  <div class="progress-container">
    <div class="progress" id="progress">
      <div class="circle active">1</div>
      <div class="circle">2</div>
      <div class="circle">3</div>
      <div class="circle">4</div>
    </div>
  </div>
</div>

问题排查 & 解决方法 #

兄弟，你这是元素层级放错啦！

你现在把所有装数字的.circle元素都塞进了.progress这个div里，但progress-container的Flex布局只对它的直接子元素生效——也就是那个.progressdiv，根本管不到里面的.circle们！所以数字自然不会横向排列。

给你两个关键修正点：

1. 调整HTML结构：把.circle元素直接作为progress-container的子元素，.progress（就是那个进度条长条）要单独拎出来，用绝对定位覆盖在数字之间的连线上，而不是把数字包在它里面。
2. 补全必要样式：给.progress加定位样式，给.circle加基础的圆圈样式，这样进度条和数字的布局就都正常了。

修正后的完整代码参考：

修正后的HTML

<div class="container">
  <div class="progress-container">
    <!-- 进度条单独放，用绝对定位覆盖在数字上方 -->
    <div class="progress" id="progress"></div>
    <!-- 数字容器直接作为progress-container的子元素，Flex布局就能生效啦 -->
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
  </div>
  <!-- 这里可以加前后按钮，比如：
  <div class="btn-container">
    <button class="btn" id="prev" disabled>Prev</button>
    <button class="btn" id="next">Next</button>
  </div>
  -->
</div>

修正后的CSS（补全关键样式）

@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #f6f7fb;
  font-family: "Muli", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  text-align: center;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  max-width: 100%;
  width: 350px;
  /* 加相对定位，让内部绝对定位的进度条以它为参照 */
  position: relative;
}

.progress {
  /* 进度条样式：绝对定位在数字中间的连线上 */
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  width: 0%;
  background-color: #3498db;
  transform: translateY(-50%);
  z-index: -1;
  transition: 0.4s ease;
}

.circle {
  /* 数字的圆圈样式 */
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #e0e0e0;
  transition: 0.4s ease;
}

.circle.active {
  border-color: #3498db;
  color: #333;
}

/* 可选：按钮样式 */
.btn {
  background-color: #3498db;
  color: #fff;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 30px;
  margin: 5px;
  font-size: 14px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus {
  outline: 0;
}

.btn:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

这样调整之后，progress-container的Flex布局就能直接作用到每个.circle元素上，数字1-4就会按照justify-content: space-between的规则横向均匀排列，进度条也能正常跟着按钮切换啦！

备注：内容来源于stack exchange，提问作者marco verheyen