使用flex强制div对齐到页面右下方

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-direction: row。这意味着主轴是水平的，而justify-content –只能在主轴–上工作，将水平对齐flex项目。

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