CSS Flexbox列布局问题：Cozy Tea项目Locations模块实现受阻

当前代码无法实现目标列布局的核心问题是：.Locations容器默认采用flex-direction: row，导致标题<h2>和三个地址卡片在同一行排列，不符合标题在上、卡片横向并列的需求。以下是修复后的完整代码：

修改后的CSS代码 #

.Locations {
  background-image: url("img-locations-background.jpg");
  height: 500px;
  width: 1200px;
  display: flex;
  flex-direction: column; /* 改为垂直排列，让标题和卡片容器上下分布 */
  justify-content: center;
  text-align: center;
  margin-left: 300px;
  font-size: 22px;
}

/* 新增卡片容器，实现横向并列布局 */
.locations-list {
  display: flex;
  gap: 40px; /* 控制卡片之间的间距 */
  margin-top: 15px;
}

.locations-box {
  background-color: #000; /* 还原原图黑色卡片背景 */
  color: #fff;
  width: 300px;
  padding: 20px 0;
}

.Locations h2 {
  margin: 0;
}

修改后的HTML代码 #

<div class="Locations">
  <h2>Locations</h2>
  <!-- 新增父容器包裹所有卡片，实现横向排列 -->
  <div class="locations-list">
    <div class="locations-box">
      <h3>downtown</h3>
      <p>384 west 4th St<br> suite 108<br> Portland, Maine</p>
    </div>
    <div class="locations-box">
      <h3>East bayside</h3>
      <p>3433 phisherman's avenue<br> (northwest corner)<br> Portland, Maine</p>
    </div>
    <div class="locations-box">
      <h3>Oakdale</h3>
      <p>515 Crescent avenue<br> second floor<br> Portland, Maine</p>
    </div>
  </div>
</div>

关键调整说明 #

1. 将.Locations的flex-direction改为column，让标题和卡片容器垂直分布
2. 新增.locations-list容器并设置为水平flex布局，实现三个卡片横向并列
3. 给.locations-box添加背景色、宽度和内边距，还原原图的卡片视觉样式
4. 调整间距和边距，优化整体排版紧凑度

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