使用flex

Question

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

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

我可以添加什么来强制它位于页面底部，以便在数据加载之前它不会浮动到顶部？当我尝试添加position: fixed和bottom: 0时，它覆盖其他弹性定位并向右对齐，当它应该是正确的时候。所以我想使用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 - 仅适用于主轴 - 将水平对齐柔性项目。

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