Question

我有问题。我有一个我在flexbox中实现的表。我想打破底线＆＃34; row＆＃34;对齐，不影响其他行的间距。（我把＆＃34; row＆＃34;放在引号中，因为从技术上讲它不是行，它是三个不同列中的最后一个单元格）

这是我想要实现的截图：

Here是迄今为止我所掌握的JSFiddle。我想也许这样做会但是看起来不是这样：

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

我有两个主要问题 - 获得＆＃34;了解更多＆＃34;要对齐的单元格，并将所有列的垂直边框延伸到相同的长度。

这不是使用弹性行而不是弹性列的选项，因为它必须在移动中响应性地折叠。

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

Answer 1

你必须设置列容器（#top-buys）才能显示：flex;使所有3列的高度相同。

一旦你这样做，你就可以调整列内容，使它们不会从空间设置中分散出来

如果添加flex-grow：0;到div.new-region-page a.read-更多它会把它推到底部。