如何垂直对齐卡片内的页脚，高度相等，但主体部分具有柔性

Question

我已经制定了以下最低案例场景：https://jsfiddle.net/frp61gh7/

超文本标记语言：

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
    some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
    <p>
    this is some kind of footer that should always stick to the bottom
</p>
    </div>
  </div>
  <div class="card">x5...etc</div>
</div>

CSS：

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
}
.footer{
  border: 1px solid red;
}
p{
  flex-grow: 1;
}

在那里，我有6张卡，在一个Flexbox容器中流动，就像我想要的一样。（蓝色边框）卡片高度相等，按照我想要的方式流动。每行牌的高度可能会随着该行最高的牌而变化。在真实场景中，这是可行的。

但是，每张卡片的主体可以是高的，也可以是低的，这取决于它的内容（例如，在现实生活中，productimage的宽度是固定的，但高度是可变的）。现在的问题是：由于主体高度灵活，我似乎无法将页脚div（红色边框）放到卡的底部内部。位置：绝对是没有选择的，因为我尝试了这个，这个和灵活的身体变得混乱。

有什么建议吗？

Answer 1

此外

只要没有更好的答案，我现在已经找到了一种解决问题的方法。可能会帮助他人和/或让人感觉到我希望最终结果是什么：

在我自己的解决方案中，我添加了一个与页脚高度相同的占位符（是的，回到遗迹技术）...

谜语小提琴：https://jsfiddle.net/qfo42nh8/

CSS：

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.placeholder{
  height: 100px;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  position: relative;
}
.footer{
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  height: 100px;
}

html:

<div class="row">
 <div class="card">
    <h2>card</h2>
    <p>
    piece of body that needs flexible height..
    </p>
    <div class="placeholder">
    </div>
    <div class="footer">
    <p>
    footer content
</p>
    </div>
  </div> <!-- x 5 extra..you get the idea -->
</div>

Answer 2

制作卡片弹性容器并将方向设置为“列”，然后给出页脚页边距顶部：auto。

这会将页脚推到每列的底部。

.row {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
}

.card {
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  display:flex;
  flex-direction: column;
}

.footer {
  border: 1px solid red;
  margin-top: auto;
}

p {
  flex-grow: 1;
}

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
</div>