如何使用flexbox在底部保持链接？

Question

我们必须在最多3列的多行中显示内容块。每个内容块包含一个heading，description和link。我们正在使用flexbox在一行中显示块，以使行的高度被最高的元素占用。但是，我们无法始终将link的底部对齐，并且似乎总是将其放置在每个description的正下方。

如何使用flexbox使链接在每个块的底部对齐并使每个块仍为最高块的高度？

这是我们尝试过的：https://codepen.io/userrj/pen/WYXoOO

代码说明：

1. 每个街区都被.bkg--grey包围着，因此您可以看到该街区正按预期达到最高街区的高度。
2. border与flex__item一起添加到每个元素中，因此您可以看到它占用了多少空间。
3. 每个块包含：heading中的description，link和top down (column)

当前问题：

所需的输出

我们希望不要使用float或position: absolute来完成此操作。

Answer 1

您需要将p设置为flex容器并调整一些对齐方式：

playground

完整代码：

article

article {
  display: flex;
}
.flex__item > div:last-child {
  margin-top:auto;
}