如何在弹性框中对齐底部“行”而不影响其他“行”？

Question

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

这是我想要实现的屏幕截图：

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

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

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

使用弹性行代替弹性列不是一种选择，因为它必须在移动设备中响应折叠。

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

Answer 1

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

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

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