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

Question

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

让我想象一下：

我想将button放在整个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上使用button，在容器上使用flex-direction: column。

＆＃13;

＆＃13;

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

button {
  margin-top: auto;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

要从容器底部证明flex儿童，请使用justify-content: flex-end;

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