如何在柔性盒中對齊底部「行」而不影響其他部分？

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會將它推到底部。