柔性包装会产生太多的水平间距

Question

我正在使用flex-wrap，但它在项目之间创建了太多的垂直间距。请参阅图像并指导我解决方案以消除垂直间距。

    section.genereListContainer{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  //justify-content: center;
}

.bookPackage{
  width: 100px;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<section class="genereListContainer">
<div class="bookPackage" *ngFor="let book of genereList.genres">
  {{book.name}}
</div>