将<button>中的项目垂直对齐为弹性项目

Question

我有许多按钮，里面有不同大小的图像：

<div>
  <button><img src="http://via.placeholder.com/200x200" alt=""></button>
  <button><img src="http://via.placeholder.com/200x100" alt=""></button>
  <button><img src="http://via.placeholder.com/200x50" alt=""></button>
  <button><img src="http://via.placeholder.com/200x200" alt=""></button>
  <button><img src="http://via.placeholder.com/200x150" alt=""></button>
</div>

所以，我想将这些图像垂直对齐到底部，如下图所示：

但无论我尝试什么，图像总是垂直居中：

看看这个jsFiddle：https://jsfiddle.net/y7efebwg/

有趣的是，如果我使用div而不是button s，一切都按预期工作：https://jsfiddle.net/Lkycyvvf/1/

Answer 1

将按钮的display属性设置为flex并使用flex-direction:column和justify-content:flex-end似乎有效。

div {
  display: flex;
}

button {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<div>
  <button><img src="http://via.placeholder.com/200x200" alt=""></button>
  <button><img src="http://via.placeholder.com/200x100" alt=""></button>

</div>

Answer 2

将按钮本身设置为弹性容器并为margin-top auto提供图像似乎有效：

button {
    display: flex;
    flex-direction: column;
}

button img {
    margin-top: auto;
}

https://jsfiddle.net/y7efebwg/1/