如何将高度相等但body部位灵活的卡片内的页脚与flexbox垂直对齐

Question

我做了这个最小情况的场景：https://jsfiddle.net/frp61gh7/

HTML:

<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张卡片，它们在一个灵活的盒子容器中流动，就像我想要的一样。(蓝色边框(这些卡片高度相等，按我想要的方式流动。每行牌的高度可能因该行最高的牌而异。在真实的场景中，这是有效的。

然而，每张卡的主体可以是高的或低的，这取决于它的内容(例如，在现实生活中，生产图像的宽度是固定的，但高度是可变的(。现在的问题是：由于主体的高度是灵活的，我似乎无法将页脚div(红色边框(放在卡片的底部内部。立场：绝对是没有选择的，因为我尝试了这个，这会让灵活的身体变得一团糟。

有什么建议吗？

Answer 1

使卡片成为灵活的容器，并将方向设置为列，然后给页脚margin-top: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>

Answer 2

此外还有

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

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

谜语的小提琴：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>