如何在柔性盒中对齐底部“行”而不影响其他部分？

Question

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

这里是什么，我想实现一个截图：

Here是一个什么样的的jsfiddle我迄今为止。我想，也许这一点会做，但它似乎不是：

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

我有两个主要问题 - 让“查看更多”细胞对齐，垂直边界延伸到所有列的长度相同。

由于这种方式必须在移动设备中作出响应式折叠，因此不能使用弹性行而不是Flex列。

希望有人能告诉我如何用flexbox实现这一点。我尝试了很多成功的flex属性。

Answer 1

您必须设置列容器（＃top-buys）以显示：flex;让所有3列的高度相同。

一旦你这样做，使他们不都是从分散设置

空间之间如果添加您可以调整列内容柔性成长：0;到div.new-region-page a.read-more会将它推到底部。