如何使用CSS Flex实现盒子水平对齐？求助解决堆叠异常问题

问题根源 #

你的盒子始终垂直堆叠的核心原因是HTML结构错误：所有.box元素都嵌套在第一个.box内部，而非作为.boxes的直接子元素。.boxes作为flex容器，仅会对自身的直接子元素应用flex布局，嵌套的.box会继承块级元素的默认布局规则，自然垂直排列。

修正后的HTML代码 #

<div class="section2">
  <h1 class="s2h1">This is Random Info</h1>
  <div class="boxes">
    <div class="box">
      <div class="b1container">
        <img src="" alt="Placeholder" class="s2boxImg">
      </div>
      <h5 class="b1Info">PlaceHolder Text</h5>
    </div>
    <div class="box">
      <div class="b1container">
        <img src="" alt="Placeholder" class="s2boxImg">
      </div>
      <h5 class="b1Info">PlaceHolder Text</h5>
    </div>
    <div class="box">
      <div class="b1container">
        <img src="" alt="Placeholder" class="s2boxImg">
      </div>
      <h5 class="b1Info">PlaceHolder Text</h5>
    </div>
    <div class="box">
      <div class="b1container">
        <img src="" alt="Placeholder" class="s2boxImg">
      </div>
      <h5 class="b1Info">Placeholder Text</h5>
    </div>
  </div>
</div>

优化后的CSS代码 #

.b1container {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffdeab;
  border-radius: 10px;
  transition: 0.5s;
  cursor: pointer;
}

.b1container:hover {
  width: 250px;
  height: 250px;
}

.s2boxImg {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  border: 3px dotted #553c2b;
  transition: 0.5s;
}

.s2boxImg:hover {
  width: 250px;
  height: 250px;
  border: 3px dotted #f36dcb;
}

.boxes {
  display: flex;
  justify-content: center;
  gap: 20px; /* 用gap实现盒子间的均匀间距，比重复设置justify-content更可靠 */
  margin-top: 30px;
}

.box {
  text-align: center; /* 让盒子内的文本居中，提升美观度 */
}

关键修改说明 #

1. 调整HTML层级：将4个.box元素全部改为.boxes的直接子元素，确保flex布局能作用到所有盒子上
2. 优化flex布局：用gap属性替代重复的justify-content，更直观地控制盒子间的间距
3. 细节优化：给.box添加text-align: center，让内部文本和图片居中对齐

内容的提问来源于stack exchange，提问作者user20759768