使用 flex 将按钮对齐到左下角

Question

我需要在父 div 的左下角对齐一个 div，就像这个 Bootstrap docs flex 演示链接中的第二个示例一样：https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

在我的例子中，唯一的区别是其中一个子项是图像。无论屏幕大小如何，都应该进行对齐。

在以下示例中，按钮容器 div 需要对齐 flex-container 的左下角。

编辑： 按钮容器应出现在图像本身上，而不是图像下方。

.flex-container{
  display: flex;
  align-items: flex-end !important;
  border: solid 1px red;
}

.button-container{
  border: solid 1px green;
}

<div class="flex-container">
    <img src="https://www.webkit.org/blog-files/acid3-100.png" />
    <div class="button-container">
        <button>Button 1</button>
        <button>Button 2</button>
    </div>
</div>

Answer 1

您在代码中遗漏的是flex-direction。默认情况下它将是行，因此 div 并排出现。您需要将值指定为column。

.flex-container{
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  border: solid 1px red;
  position: relative;
}

.button-container{
  border: solid 1px green;
  display: flex;
  position: absolute;
  left: 20px;
  top: 50px;
}

<div class="flex-container">
    <img src="https://www.webkit.org/blog-files/acid3-100.png" />
    <div class="button-container">
        <button>Button 1</button>
        <button>Button 2</button>
    </div>
</div>

编辑：制作按钮position: absolute。您可以使用 sn-p 中已经提到的 left/top 属性根据您的要求对齐它们。

Answer 2

如果您事先知道图片的尺寸，我建议您使用背景属性

.flex-container{
  display: flex;
  align-items: flex-end !important;
  border: solid 1px red;
  background-image: url("https://www.webkit.org/blog-files/acid3-100.png");
  background-repeat: no-repeat;
  background-size: cover;
  width: 780px;
  height: 619px;
}

.button-container{
  border: solid 1px green;
}

<div class="flex-container">
    <div class="button-container">
        <button>Button 1</button>
        <button>Button 2</button>
    </div>
</div>