css - 如何在不影响其他盒子的情况下对齐 flex box 中的底部 "row"？

Question

我有一个问题。我有一个在 flexbox 中实现的表。我想让底部的“行”对齐，而不影响其他行的间距。 (我将“行”放在引号中，因为从技术上讲它不是行，它是三个不同列中的最后一个单元格)

这是我想要实现的截图:

Here是我目前拥有的 JSFiddle。我想也许这一点可以做到，但似乎不行:

div.new-region-page div.three-col-buys a.read-more {
  align-self: flex-end;
}

我有两个主要问题 - 让“查看更多”单元格对齐，以及将垂直边框延伸到所有列的相同长度。

使用 flex 行而不是 flex 列不是一种选择，因为它必须在移动设备中以响应方式折叠。

希望有人可以建议我如何使用 flexbox 实现这一点。我尝试了各种 flex 属性，但收效甚微。

Answer 1

您必须将列容器 (#top-buys) 设置为 display:flex;使所有 3 列的高度相同。

一旦你这样做了，你就可以调整你的列内容，这样它们就不会全部从间隔设置中散开

如果加上 flex-grow:0;到 div.new-region-page a.read-more 它将把它推到底部。