如何使用flexbox将元素固定到div的底部

Question

我在使用flexbox或通过任何其他方式将元素粘贴到div底部时遇到了问题。

到目前为止，我已经尝试过：

1. 添加页边空白顶部：自动；到最后一个div
2. 添加边距底部：自动；到最后一个div上方的p标记
3. 自对准：柔性端；到最后一个div
4. 位置：绝对；底部：0；到最后一个div
5. 切换到css网格
6. 将容器顶部我想要的元素包装到它们自己的div中
7. 将自身单独与每个元素对齐
8. 高度：100%；到最后一个div上方的p标记

.outer-div {
display: flex;
flex-wrap: wrap;
align-content: baseline;
border: 3px solid black;
width: 100%;
height: 100vh
}
.element {
margin: 0px auto 0px 0px;
align-self: baseline;
}
.par {
flex: 100%
}
.buttons {
flex: 100% margin: auto 0px 0px 0px;
}

<div class="outer-div">
<p class="element" href="">element</p>
<small class="other-element">element</small>
<p class="par">word</p>
<div class="buttons">
<button>button 1</button>
<button>button 2</button>
</div>
</div>

1. 开始时的任何边距都崩溃了
2. 一开始的任何利润都崩溃了
3. 它什么也没做
4. 它几乎奏效了，但它涵盖了一些内容
5. 将某些内容推送到div之外
6. 没有改变任何事情
7. p标签不会完全伸展
8. 将最后一个元素推到了div之外

Answer 1

切换到flex-direction: column，使主轴垂直，并在按钮上使用margin-top: auto。

.outer-div {
display: flex;
flex-direction: column;
height: 100vh
}
.buttons {
margin-top: auto;
}
body {
margin: 0;
}

<div class="outer-div">
<p class="element" href="">element</p>
<small class="other-element">element</small>
<p class="par">word</p>
<div class="buttons">
<button>button 1</button>
<button>button 2</button>
</div>
</div>