如何让 CSS flex 项目定位到上面的空间中？

Question

如上图所示，如何让弹性项目占据它们上方的空间？

这是我的代码：

<ul class="list-container">
  <li v-for="hero in heroes" :key="hero.id" class="hero-list-card">
    <router-link
      :to="{ name: 'Hero', params: { name: slugify(hero.name), id: hero.id} }"
      data-testid="hero-name">
      <img :src="`${hero.thumbnail.path}.${hero.thumbnail.extension}`" alt="">

      <div class="text">
        <p class="description heading four">{{ hero.name }}</p>
        <img class="icon" src="@/assets/icons/arrow-right.svg" alt="">
      </div>
    </router-link>
  </li>
</ul>

  .list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }

  .comic-list-card,
  .hero-list-card {
    width: 40%;
    margin: 1rem;
  }

Answer 1

如果我正确理解您的问题，您可以添加 align-self: stretch;到项目，它们都将获得相同的高度，这将迫使它们占据与每个项目相邻的剩余空间。