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

【问题标题】：Forcing alignment of div to bottom right of page using flex使用flex强制将div对齐到页面的右下角
【发布时间】：2017-07-30 21:46:12
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

弹性容器的初始设置是flex-direction: row。这意味着主轴是水平的，justify-content（仅适用于主轴）将水平对齐弹性项目。

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

【讨论】：