html - 如何在不使用绝对对齐的情况下将内容对齐到 flex 容器的底部？

Question

所以我基本上有两个宽度相同的容器，但根据其内容可以有不同的“高度”。不管怎样，我希望两者都有相同的高度，采用最高的高度，所以我使用了一个工作完美的 flex 盒。

现在的问题是我想知道是否可以在它们的底部对齐内容。

我基本上有:

<div class="flex-box">
    <div class="row event">MetTalks...</div>
    <div class="row shop">Digital Shop...</div>
</div>

.flex-box {
    display: flex;
    width: 66%;
    flex-direction: row;
    justify-content: flex-start;
    padding: 30px;
}

.row {
    flex: 1;
}

如您所见here ，它们同样占据了这一行(我只希望它们跨越前 2/3)，就像我想要的那样，并且它们的高度相同。但我希望能够对齐底部的按钮。

我尝试了很多不起作用的方法，例如在里面制作一个表格 div，但我无法将高度拉伸(stretch)到行 div 的 100%

我也不能对按钮使用position:absolute，因为当它们从高度计算中取出时，它们会与文本重叠。

我什至尝试在每个容器内制作一个垂直对齐的柔性容器，但这也不会拉伸(stretch)到 100% 高度

Answer 1

您可以通过绝对定位实现您想要的效果，而无需与文本重叠。您可以为按钮设置固定高度，假设为 50px。然后，您必须将 padding-bottom 应用于等于按钮高度+顶部和底部边距的框。因此，如果您希望按钮位于距框底部 20 像素的位置，则可以向框添加 90 像素 (50 + 20 + 20) 的 padding-bottom。如果您可以将代码提交到jsfiddle，那么帮助会更容易。