Css Flexbox列：垂直对齐最后一个元素

我在三个flexbox列中有不同数量的内容，但我希望显示在每列底部的按钮对齐。我该怎么做

我正在使用的代码（）

.container{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
位置：相对位置；
保证金：0自动；
填充：25px0；
宽度：500px；
边框：1px实心#000；
}
上校{
宽度：33.33%；
文本对齐：居中；
}
上校：第一个孩子：之后，
上校：最后一个孩子：以前{
内容：“；
位置：绝对位置；
排名前10%；
左：33.33%；
宽度：1px；
身高：80%；
背景色：#000；
}
上校：最后一个孩子：以前{
左：66.67%；
}

福

按钮
福

酒吧

按钮
福

酒吧

巴兹

按钮

只需添加

.col{
显示：flex；/*魔术开始*/
弯曲方向：柱；/*柱布局*/
对齐项目：居中；/*水平居中内容*/
}
钮扣{
页边距顶部：自动；/*推到底部*/
}

.container{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
位置：相对位置；
保证金：0自动；
填充：25px0；
宽度：500px；
边框：1px实心#000；
}
上校{
宽度：33.33%；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
上校：第一个孩子：之后，
上校：最后一个孩子：以前{
内容：“；
位置：绝对位置；
排名前10%；
左：33.33%；
宽度：1px；
身高：80%；
背景色：#000；
}
上校：最后一个孩子：以前{
左：66.67%；
}
钮扣{
页边顶部：自动；
}

福

按钮
福

酒吧

按钮
福

酒吧

巴兹

按钮

请注意，段落之间的边距将不再收拢，因此您可能需要减小边距。