flex项目的图像

你好！

有没有人知道我怎样才能让这些flex项目占据上面的空间，就像我在上面的图像中所展示的那样？

下面是我当前的代码:

<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;
  }