如何将标题定位在容器顶部并实现Flex子项均匀分布？

问题核心 #

你的代码存在三个关键问题：

1. 标题<h2>和卡片同属.cards Flex容器的子元素，默认会一起参与布局，加上align-items: center会让所有元素垂直居中，导致标题无法置顶；
2. 使用justify-content: space-evenly时，标题和卡片被当作同级元素分配空间，且未限制卡片宽度，导致布局错乱、出现3上1下的分布；
3. HTML里标题的类名是cards__tile，和CSS中的cards__title不匹配，标题样式完全不生效。

修改后的完整代码 #

HTML（修正类名错误）

<section class="cards">
  <h2 class="cards__title">Lorem Ipsum</h2>

  <div class="card">
    <img class="card__img">
    <h3>Lorem ipsum dolor sit amet.</h3>
  </div>

  <div class="card">
    <img class="card__img">
    <h3>Lorem ipsum dolor sit amet.</h3>
  </div>

  <div class="card">
    <img class="card__img">
    <h3>Lorem ipsum dolor sit amet.</h3>
  </div>

  <div class="card">
    <img class="card__img">
    <h3>Lorem ipsum dolor sit amet.</h3>
  </div>
</section>

CSS（调整Flex布局属性）

.cards__title {
  flex: 0 0 100%; /* 强制标题独占整行 */
  text-align: center; /* 标题居中显示 */
  margin: 1rem 0; /* 给标题添加上下间距 */
}

.cards {
  background-color: #363636;
  min-height: 100vh;
  color: #EEEBDD;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 内容从容器顶部开始排列 */
  justify-content: space-evenly; /* 卡片在剩余空间均匀分布 */
  padding: 1rem; /* 避免内容贴容器边缘 */
}

.card {
  flex: 0 0 calc(25% - 1rem); /* 每个卡片占25%宽度，减去间距 */
  margin-bottom: 1rem; /* 卡片底部间距 */
  background-color: #4a4a4a; /* 可选：给卡片添加背景色 */
  padding: 1rem; /* 可选：卡片内边距 */
  border-radius: 8px; /* 可选：圆角效果 */
}

调整逻辑说明 #

• 标题置顶：用flex: 0 0 100%强制标题占满整行，同时把容器align-items改为flex-start，让所有内容从顶部开始排列；
• 卡片均匀分布：给每个卡片设置固定宽度占比（calc(25% - 1rem)），确保一行能容纳4个卡片，配合flex-wrap: wrap在屏幕缩小时自动换行，此时justify-content: space-evenly就能让卡片均匀分布；
• 类名修正：将HTML中的cards__tile改为cards__title，保证CSS样式能正确作用到标题上。

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