how to create flexbox design cards with fixed footer

Question

I'm having trouble with flexbox. I'm trying to present book cards with a fixed footer (which will contain edit / remove buttons). but the footer of each card keeps running away, and results not in the same height. I searched in google and sof and found that:

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

but it does not seem to work. I would appreciate any tips. I USE REACT BTW. DONT LAUGH AT ME. THIS IS A CODE SNIPPET WHICH DOES NOT RUN because I could not figure out how to add react es6 to here.

Thank You for any help (:

this is my 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;
  }
}

I do appreciate the code snippets. Unfortunately, I'm still having a hard time understanding exactly what the issue is. Since this issue probably has to do with your CSS and not React, do you mind creating a demo that just uses html & css with some dummy data? — Michael Sorensen, Jul 08 '18 at 19:16
Hi Michael. Somehow the Edit option is not availble.
{books.map((book, index) => (

{book.title}
By: {book.author} Date: {}

))} — Eva Cohen, Jul 09 '18 at 05:06

score 0 · Answer 1 · answered Jul 08 '18 at 20:00

0

Did you try a simple position:relative / position:absolute relationship like this

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

answered Jul 08 '18 at 20:00

Core972

4,065
3
31
45

Hi Core. thank you for the answer. I tried and it did not show any different in the results. :( – Eva Cohen Jul 09 '18 at 04:53

score 0 · Answer 2 · answered Jul 09 '18 at 07:35

First of all. Thank you very much for your answers. I found out this piece of code that fixed my footer and makes it sticky footer which allways stick to the bottom:

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

credit for the source: flexbox sticky footer

how to create flexbox design cards with fixed footer

{book.title}

2 Answers2