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

Question

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

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

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

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

.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。您可以使用代码段中已经提到的左侧/顶部属性来根据您的需求对齐它们。

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>