html - 如何创建带有固定页脚的 flexbox 设计卡片

Question

我在使用 flexbox 时遇到了问题。我正在尝试展示带有固定页脚的书卡(其中将包含编辑/删除按钮)。但每张卡片的页脚不断跑开，结果高度不一样。我在 google 和 sof 中搜索，发现:

 .product-modify {
    margin-top: auto;
    margin-bottom: auto;
  }

但是好像不行。 我将不胜感激任何提示。 我使用 react 顺便说一句。别笑我。这是一个无法运行的代码片段，因为我不知道如何在此处添加 react es6。

感谢您的帮助(:

这是我的CSS:

<div>
<h1 className="searchResultsHeadline">Search Results:</h1>
<section className="products">
{books.map((book, index) => (
<div key={book.id} className="product-card">
<BookCard />
</div>
))}
</section>
</div>

/* Book List */
.searchResultsHeadline {
  font-family: "Montserrat", sans-serif;
}
.products {
  display: flex;
  flex-wrap: wrap;
}

.product-card {
  flex: 1 17%;
  margin: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 40%;

  min-height: 100%;
  padding: 5px;
}


.product-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.product-card:after {
  content: "";
  flex: auto;
}

.product-image img {
  max-width: 100%;
  border-radius: 5%;
}

.product-modify {
  margin-top: auto;
  margin-bottom: auto;
}

.empty-space {
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  width: 130px;
  height: 180px;
  margin: 0 1% 24px;
}

@media (max-width: 600px) {
  .product-card {
    flex: 1 46%;
  }
}

@media (max-width: 480px) {
  .product-filter {
    flex-direction: column;
  }
}

Answer 1

你试过像这样简单的position:relative/position:absolute关系

.product-card {
    ...
    position:relative;
}
.product-modify {
    position:absolute;
    bottom:0;
}