Question

我在flexbox上遇到了麻烦。我正在尝试使用固定的页脚（其中将包含“编辑/删除”按钮）来显示书卡。但是每张纸牌的页脚不断消失，结果高度不同。我在google和sof中搜索，发现：

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

，但似乎不起作用。我将不胜感激任何提示。我用REACT BTW。不要嘲笑我。这是一个代码片段，它无法运行，因为我不知道如何在此处添加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;
}

Answer 2

首先。非常感谢您的回答。我发现这段代码固定了我的页脚，并使其始终停留在底部的粘性页脚：

  .card-inner {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
  }

来源信用： flexbox sticky footer

如何创建具有固定页脚的Flexbox设计卡

2 个答案: