HTML -在带有柔性盒的表行中定位页脚元素

Question

我试着用柔性盒把我的元素(.table-footer)放在桌子的底部对齐.我想让桌脚粘在.table-row的底部，就像这样：

​

​

我试过：

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
}

但我得到的是：

​

​

我试过的位置是绝对的和底部的0，但效果不佳.你能告诉我问题出在哪里吗？谢谢:)

您可以在这里尝试代码：https://jsfiddle.net/a5dubgfj/

Answer 1

你可以做这样的事

.table-footer {
  background-color: grey;
  bottom: 0;
}

.table-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 108px; //the height of the table row you have so far
}

也许有更好的方法来定义高度，但这对我来说是有效的。

以下是jsfiddle链接：https://jsfiddle.net/8ubm96tk/