html - 使用 flex 将元素定位到 div 的底部

Question

我正在尝试使用 Flex 将按钮元素放置在 div 的底部，但目前我没有找到任何解决方案。

让我想象一下:

我想将按钮放置在整个div的底部。 实际样式:

.blackSquareContainer{
  flex: 1 1;
  display: flex;
  max-width: 500px;
  min-height: 490px;
}

我尝试了 button 样式:margin-top: 0 但它在 blackSquareContainer 的右侧显示按钮。我还尝试了 position:absolute 和 bottom: 0 - 它也没有帮助。

我还需要添加，单击按钮将一些行添加到 blackSquareContainer 下面的 div 中。不幸的是，即使我在那个地方添加这个按钮，如果我点击它，下面的 div 也会增长并重叠它。 min-height 也没有帮助；/

我应该怎样做才能实现这个目标？

Answer 1

您可以在按钮上使用margin-top: auto，在容器上使用flex-direction: column。

.blackSquareContainer{
  display: flex;
  height: 400px;
  width: 350px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid black;
}

button {
  margin-top: auto;
}

<div class="blackSquareContainer">
  <img src="http://placehold.it/350x150">
  <button>Button</button>
</div>