<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/

有趣的是，如果我使用divs 而不是buttons，一切都会按预期进行：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>