css - 使用flex强制将div对齐到页面的右下角

Question

我们在我们的 Angular 2 应用程序中使用 flexbox 但我遇到了一个问题，一旦数据被加载，包含分页组件的 div 出现在数据下方，在第二个左右，数据仍在加载分页组件 float 到屏幕顶部。我想锁定分页组件的位置，这样用户就看不到该移动。这是分页组件的 css:

.pagination {
  display: flex;
  justify-content: flex-end;
}

我可以添加什么来强制它位于页面底部，这样它就不会在数据加载之前 float 到顶部？当我尝试添加 position: fixed 和 bottom: 0 时，它会覆盖其他 flex 定位并左对齐，而它应该是右对齐的。所以我想使用 flex 来做到这一点 - 而不是标准的 css。

所以，总而言之，我需要这个来强制右对齐，并对齐底部。

Answer 1

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  align-content: flex-end;
}

---

flex 容器的初始设置是flex-direction: row。这意味着主轴是水平的，justify-content——它只在主轴上起作用——将水平对齐 flex 元素。

对于行方向容器中的垂直对齐，使用align-items(对于单行容器，即nowrap)和/或align-content (对于多行容器，即 wrap)