css - 中的垂直对齐元素作为 flex 元素

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，一切都会按预期工作: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>