如何让flex布局下的3个<div>元素在<h2>下方横向并排？

要实现<h2>在顶部居中、下方三个<div>横向并排的效果，只需把三个项目<div>包裹在一个新容器中，给这个容器设置Flex横向布局即可，具体修改如下：

修改后的HTML代码 #

<section class="projects" id="projects">
  <h2>Projects</h2>
  <!-- 新增容器包裹三个项目div -->
  <div class="projects-container">
    <div class="proj1">
      <p>Placeholder</p>
    </div>
    <div class="proj2">
      <p>Placeholder</p>
    </div>
    <div class="proj3">
      <p>Placeholder</p>
    </div>
  </div>
</section>

修改后的CSS代码 #

.projects {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  /* 可选：让容器占满宽度，方便下方项目容器自适应 */
  width: 100%;
}

/* 新增项目容器的Flex布局 */
.projects-container {
  display: flex;
  /* 可选：屏幕宽度不足时自动换行，避免横向溢出 */
  flex-wrap: wrap;
  /* 可选：让项目在容器内水平居中，保持视觉协调 */
  justify-content: center;
  width: 100%;
}

/* projects placeholder */
.projects div {
  background-color: var(--secondary-color);
  border-radius: 20px;
  width: 360px;
  height: 480px;
  margin: 15px;
  color: var(--primary-color);
}

原理说明 #

• 原.projects容器的flex-direction: column保持不变，确保<h2>和新的.projects-container垂直排列，维持标题在顶部居中的效果。
• 新的.projects-container设置display: flex（默认flex-direction: row），内部的三个项目<div>会自动横向并排。
• flex-wrap: wrap和justify-content: center是优化项，分别解决小屏幕下的溢出问题和项目的水平居中对齐，提升页面兼容性与美观度。

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