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

Question

我无法使用 flexbox 或通过任何其他方式以运作良好的方式将元素粘贴到 div 的底部。

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

1. 添加边距顶部：自动；到最后一个 div
2. 添加边距底部：自动；到最后一个 div 上方的 p 标签
3. 对齐自我：flex-end；到最后一个 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 之外。

标签： htmlcssflexbox

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>